Что такое прогресс бар
Перейти к содержимому

Что такое прогресс бар

  • автор:

Прогрессбар

Документация и примеры использования пользовательских индикаторов выполнения Bootstrap с поддержкой штабелированных баров, анимированных фонов и текстовых меток.

Как это устроено

  • Мы используем класс .progress как обертку для индикации максимального значения прогрессбара.
  • Мы используем внутренний класс .progress-bar для индикации пройденного прогресса.
  • Класс .progress-bar требует оформления себя как строчного элемента, обычного класса или CSS для задания своей ширины.
  • Класс .progress-bar также требует атрибутся role и aria , чтобы стать открытыми к взаимодействию с вспомогательными технологиями.

Все это воплощено в примерах ниже.

 class="progress">  class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
class="progress"> class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
class="progress"> class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
class="progress"> class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
class="progress"> class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">

Bootstrap имеет немало утилит для задания ширины. В зависимости от ваших нужд они могут помочь и с быстрой настройкой прогрессбара.

 class="progress">  class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> 

Лейблы

Добавляйте лейблы (т.е. инфо типа цифр) в ваши прогрессбары, размещая текст внутри класса .progress-bar .

 class="progress">  class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25% 

Высота

В классе .progress задается лишь атрибут height , так что если вы измените это значение, внутренний класс .progress-bar автоматически изменит свой размер соответственно.

 class="progress" style="height: 1px;">  class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">   class="progress" style="height: 20px;">  class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> 

Фон

Используйте обычные классы фона для изменения внешнего вида отдельных полос прогрессбара.

 class="progress">  class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">   class="progress">  class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">   class="progress">  class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">   class="progress">  class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"> 

Множественные полосы

Включайте в свой прогрессбар таковые, если необходимо.

 class="progress">  class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">  class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">  class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> 

Полосатые

Добавьте класс .progress-bar-striped к любому элементу класса .progress-bar , чтобы добавить градиентные полосы на CSS к фоновому цвету прогрессбара.

 class="progress">  class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">   class="progress">  class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">   class="progress">  class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">   class="progress">  class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">   class="progress">  class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"> 

Анимированные полосы

Добавьте класс .progress-bar-animated к элементу класса .progress-bar для анимации полосок справа налево анимациями CSS3.

Изменение состояния анимации

 class="progress">  class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"> 

Что такое Progress bar? Значение термина Progress bar

Progress bar (Индикатор процесса) – это элемент графического интерфейса пользователя, представляющий собой прямоугольную (в большинстве случаев) панель для отображения индексации ходи или выполнения какой либо задачи, например загрузки файла по сети. Обычно бегунок индикатора процесса заполняется слева направо. Часто встречается текстовое сопровождение выполненных процентов. Такие элементы используются в том случае, если масштаб задачи известен, либо ход выполнения задачи требует отображения информации.

Помогло? Делись!

Реклама:

Представляем
систему управления сайтами
NetCat

CMS NetCat — профессиональная коммерческая система управления Интернет-сайтами, один из лидеров на российском рынке веб-разработок.
Наша компания является сертифицированным партнером и рекомендуемым разработчиком сайтов на NetCat во Владивостоке.
В настоящее время большинство новых сайтов мы создаем на основе ее программной платформы.

Быстрый поиск по сайту:

© Аниматика 2005 — 2024

690002 , г.Владивосток , пр-т Острякова, 5, оф.306

Тел.: +7 (423) 206-00-23
E-mail: info@animatika.ru

: Элемент индикатора выполнения

**HTML-элемент **отображает индикатор, показывающий ход выполнения задачи, обычно отображаемый в виде прогресс бара (индикатора выполнения).

Интерактивный пример

Категории контента Потоковый контент, фразовый контент, контент, ассоциированный с label, явный контент.
Допустимый контент Фразовый контент, но среди его потомков не должно быть элемента .
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Допустимые родители Любой элемент, который принимает фразовый контент.
Допустимые ARIA-роли Нет
DOM-интерфейс HTMLProgressElement (en-US)

Атрибуты

Этот элемент включает в себя глобальные атрибуты.

Этот атрибут описывает сколько затрат требует задача, указанная элементом progress . Атрибут max , в случае указания, должен быть положительным, также, возможно применение числа с плавающей точкой. Значение по умолчанию 1.

Этот атрибут указывает какая часть задачи была выполнена. Это может быть число с плавающей точкой от 0 до max , или между 0 и 1, если max не указан. Если атрибут value не указан, индикатор выполнения не определён; это указывает на то, что действие продолжается без указания на то, сколько времени оно займёт.

Примечание: Минимальное значение всегда 0, а атрибут min недопустим для прогресс-элемента. Вы можете использовать свойство CSS -moz-orient (en-US), чтобы указать, должен ли индикатор выполнения отображаться горизонтально (по умолчанию) или вертикально.

Примечание: Псевдокласс :indeterminate может быть использован для работы с неопределённым индикатором выполнения. Чтобы индикатор выполнения стал неопределённым после присвоения ему значения, вы должны удалить атрибут value с помощью element.removeAttribute(«value»)

Примеры

progress value="70" max="100">70 %progress> 

Бар Прогресс

Адрес: ул. Пресненский Вал 38 еще 1 адрес сети

Белорусская

Средний чек:

Кухня: европейская, закуски

«Прогресс» — гастробар у метро «Белорусская» с оригинальным меню. Основал «Прогресс» известный ресторатор Аркадий Зельцер. Заведение отличается интересной концепцией, которая проявляется в составлении меню. По задумке создателя, это место, где утром можно выпить хороший кофе, сытно пообедать днем и попить пиво в компании друзей вечером. Именно поэтому меню разделено на три части: «завтраки» — проходят с 09:00 до 12:00, «обеды» до 16:00 и «all day вечер». В последний раздел включены три горячих блюда, которые можно заказать и в течение всего дня. Из напитков есть по 9 сортов пива и кофе. В заведении один просторный зал. Расположиться можно за барной стойкой или за длинными столами у окна.

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

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