Время врачует раны (Августин).

Bootstrap – Прогрессирующая шкала

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Bootstrap - Прогрессирующая шкала
В этой главе обсуждаются о прогрессирующей шкале в Bootstrap. Цель прогрессирующей шкалы, показать активность загрузки, в процессе, или что происходит действие в отношении элементов на странице.

В прогрессирующих шкалах используются CSS3 переходы и анимация для достижения некоторых их результатов. Эти функции не поддерживаются в Internet Explorer 9 и ниже или более ранние версии Firefox. Opera 12 не поддерживает анимацию.

Прогрессирующая шкала по умолчанию

Чтобы создать базовый индикатор:

  • Добавить <div> с классом .progress.
  • Далее, внутри <div>, добавьте пустой <div> с классом .progress-bar.
  • Добавьте атрибут стиля с шириной, выраженной в процентах. Скажем, например, style=”40%”; указывающий на то, что индикатор был на уровне 40%.

Давайте посмотрим пример ниже:

Альтернативная прогрессирующая шкала

Чтобы создать индикатор с различными стилями:

  • Добавить <div> с классом .progress.
  • Далее, внутри <div>, добавьте пустой <div> с классом .progress-bar и класс progress-bar-*, где * может быть success, info, warning, danger.
  • Добавьте атрибут стиля с шириной, выраженной в процентах. Скажем, например, style=”90%”; указывает на то, что индикатор находиться на уровне 90%.

Давайте посмотрим пример ниже:

 

Полосатая прогрессирующая шкала

Чтобы создать полосатый прогресс бар:

  • Добавьте <div> с классом .progress и .progress-striped.
  • Далее, внутри <div>, добавьте пустой <div> с классом .progress-bar и класс .progress-bar-*, где * может быть success, info, warning, danger.
  • Добавьте атрибут стиля с шириной, выраженной в процентах. Скажем, например, style=”60%”; указывает на то, что индикатор был на уровне 60%.

Давайте посмотрим пример ниже:

 

Анимационная прогрессирующая шкала

Для того, чтобы создать анимированную прогрессирующую шкалу:

  • Добавьте <div> с классом .progress и .progress-striped. Кроме того, добавьте класс .active в .progress-striped.
  • Далее, внутри <div>, добавьте пустой <div> с классом .progress-bar.
  • Добавьте атрибут стиля с шириной, выраженной в процентах. Скажем, например, style=”40%”; указывающий на то, что индикатор находиться на уровне 40%.

Данный код будет анимировать  прогрессирующую шкалу справа налево.

Давайте посмотрим пример ниже:

 

Линейная прогрессирующая шкала

Вы даже можете сложить несколько прогрессирующих шкал. Поместите несколько прогрессирующих шкал в том же .progress и они будут располагаться, как показано в следующем примере:

 

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Простая логическая игра "Поймай кота". Задача игры окружить кота точками так, чтобы он не смог убежать с поля. Постигла неудача - начни игру снова!

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close