Css progress bar: 26 Bootstrap Progress Bars

06.08.2023 alexxlab

Содержание

Индикатор выполнения · Bootstrap v4.5

Посмотреть на GitHub Оригинал

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

Как это работает

Компоненты Progress состоят из двух HTML-элементов, CSS для установки ширины и нескольких атрибутов. Мы не используем элемент HTML5 <progress>, гарантируя, что Вы можете складывать индикаторы выполнения, анимировать их , и поместите на них текстовые метки.

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

Сложите все это вместе, и Вы получите следующие примеры.

<div>
  <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

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

<div>
  <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Метки

Добавляйте метки к Вашим индикаторам выполнения, помещая текст в . progress-bar.

<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Высота

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

<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Фоны

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

<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Множественные бары

При необходимости включите несколько индикаторов выполнения в компонент прогресса.

 <div>
  <div role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Полосатые

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

<div>
  <div role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div>
  <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

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

Полосатый градиент также можно анимировать. Добавьте .progress-bar-animated к .progress-bar, чтобы анимировать полосы справа налево с помощью анимации CSS3.

<div>
  <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

30 Awesome CSS Progress Bars (бесплатный код и демонстрации)

1. Progress Bar Animation

Автор: Eva Wythien (evawythien)

Ссылки: Исходный код / Демо

9000 4 Дата создания: 1 ноября, 2018

Сделано с: HTML, SCSS, JS

Теги: progress-bar, eva de vena, css-animation, bar

2. Бары CSS

c индикаторы выполнения ss, сделанные с использованием шаблонов svg

Автор: Lucagez (lucagez)

Ссылки: Исходный код / Демо, Страница Github, Шаблоны SVG

Создано: 18 октября 2018 г.

90 004 Сделано с помощью: HTML, CSS, JS

Теги: svg, шаблон svg, индикатор выполнения, полоса прогресса

3. Анимированный индикатор выполнения

CSSFlow: бесплатные элементы пользовательского интерфейса и виджеты, закодированные с помощью HTML5, CSS3 и Sass. Просмотрите исходную статью и загрузите исходный код Sass/SCSS по адресу: www.cssflow.com/snippets/animated-progress-bar Исходный PSD от Вин Томаса. Протестировано в Firefox 4, Safari 5.1, Chrome 13, Opera 10, IE 9.(и новее).

Автор: Тибо (Thibaut)

Ссылки: Исходный код / Демо

Дата создания: 22 января 2013 г.

Сделано с: HTML, CSS

Теги: css3, pure-css, progress-bar, transition, loading

4. Только SCSS Loading Animation

Код, конечно, бардак, но дело во внешних значениях 😉 Идея исходно от Gal Shir, очень талантливого парень! https://dribbble. com/shots/4026985-If-only-I-Could

Автор: Тобиас Глаус (tobiasglaus)

Ссылки: Исходный код / Демо, Dribbble Shot

Created on: 9000 6 20 декабря 2018 г.

Сделано с : HTML, SCSS, JS

5. Интерактивный индикатор выполнения Pure CSS

Автор: Jenning (jenning)

Ссылки: Исходный код / Демо

Создать день: 22 ноября 2018 г.

Сделано с: Pug, Sass, JS

Препроцессор CSS: Sass

Препроцессор JS: Нет

Препроцессор HTML: Мопс

Теги: прогресс, бар , css, интерактивный, микро

6. Суперпростой индикатор выполнения

Этот индикатор выполнения использует пользовательский атрибут HTML5 data-*, позволяющий быстро обновлять индикатор выполнения, анимированный Zepto (или jQuery). Анимация завернута в функцию window.resize для реанимации при изменении размера браузера.

Автор: Stephen Fairbanks (thathurtabit)

Ссылки: Исходный код / Демо

Дата создания: 22 марта 2013 г.

Сделано с: HTML, SCSS, JS

Теги: progress-bar, html5, zepto

7. Stepped Progress Bar

Автор: Кэссиди Уильямс (cassidoo)

Ссылки: Исходный код / Демо

9000 5 Создано: 13 сентября 2018 г.

Сделано с помощью: HTML, CSS, JS

8. Индикатор выполнения с перекрытием

Индикатор выполнения, который охватывает внешнюю часть всего окна, а не только верхнюю часть. К сожалению, это зависит от jQuery, потому что я не мог заставить элементы иметь 0% высоты/ширины в зависимости от скорости прокрутки.

Автор: Thomas Vaeth (thomasvaeth)

Ссылки: Исходный код / Демо

Создано: 2 марта 2018 г.

Сделано с: HTML, SCSS, Babel

Метки: progress, progress-bar, progressbar, javascript

9. Панель загрузки CSS

900 04 Просто веселый проект, который загружает bar, который сбрасывает себя по умолчанию незадолго до завершения загрузки.

Автор: Ali Soueidan (lazercaveman)

Ссылки: Исходный код / Демо, Страница Dribbble

Дата создания: 21 июня 2018 г.

Сделано с помощью: Pug, Sass, JS

Препроцессор CSS: Sass

Препроцессор JS: 9000 6 Нет

Препроцессор HTML: Мопс

Теги: полоса загрузки, дизайн, анимация

10. Индикатор прогресса чтения Только CSS

Поэкспериментируйте с новым значением свойства позиции CSS, чтобы создать индикатор выполнения для чтения статей без необходимости использования PHP или JavaScript, только HTML и CSS. Полный текст статьи читайте здесь

Автор: Рикардо Прието (ricardpriet)

Ссылки: Исходный код / Демо, Учебник

Создано: 10 декабря 2017 г.

Сделано с: HTML, CSS, JS

11

Автор: Эрик Грегуар (Boogiesox)

Ссылки: Исходный код / Демо

9 0004 Дата создания: 30 декабря 2014 г.
Сделано с помощью: HTML, CSS, JS
Теги: loadng, loader, progress
12. Легкая полоса прогресса
Автор: 9 0006 Константин (museum404)
Ссылки: Исходный код / демо
Дата создания: 24 ноября 2015 г.
Создано с помощью: Pug, Stylus
Препроцессор CSS: Stylus
9 0004 Препроцессор JS: CoffeeScript
Препроцессор HTML: Pug
13.
Pure CSS Progress
Pure CSS Progress, довольно плавный индикатор выполнения. Я также закодировал триггеры Pure CSS Navigation, если вы хотите, чтобы код панели просто следил за комментариями css 🙂
Автор: Rafael González (rgg)
Ссылки: Исходный код / Демо
9000 5 Дата создания : 16 августа 2015 г.
Сделано с помощью: HTML, SCSS
Теги: pure-css, css, ui, 3d, chart
14. Rainbow Progress Bar
Чистый индикатор выполнения CSS и HTML, с использованием повторяющегося линейного градиента, найденного на https://css-tricks.com /stripes-css/ для выкройки.
Автор: Антуанетта Янус (интернет)
Ссылки: Исходный код / Демо, Css-tricks.com
Создано: 6 апреля 2016 г. 9 0007
Сделано с помощью: HTML, SCSS
Теги: progress, bar, pattern, diagonol, lines
15.
Pixelated Progress Bar
Автор: Aleks (achudars)
Ссылки: Исходный код / Демо, Dribbble Page, Dribbble.com 9 0007
Создано: 14 мая 2013 г.
Сделано с помощью: HTML, CSS
Теги: индикатор прогресса, индикатор прогресса, майнкрафт, зеленый
16. Радиальные индикаторы выполнения
Прокрутка каждого svg в окно активирует индикатор выполнения. Подходит для IE11.
Автор: Эрин Э. Салливан (erinesullivan)
Ссылки: Исходный код / Демо
Создано: 29 марта 2018 г.
Сделано с помощью: HTML, CSS, JS
Теги: радиальный, прогресс, jquery, инфографика, анимация
17. Сфера индикатора выполнения
Индикатор выполнения только с анимацией HTML и CSS.
Автор: Бен Андерсон (benjammin412)
Ссылки: Исходный код / Демо
Дата создания: 1 марта 2014 г.
Сделано с: HTML, CSS
Метки: 9000 6 прогресс-бар, css, html, сфера
18. Dribbble Recreation: Loading Bar
На основании следующего: https://dribbble.com/shots/791642-Animated-CSS-Progress-Bar Bubbles gif принадлежит GIPHY и соответствующему владельцу Да, я поленился и не сделал моя собственная анимация пузырей.
Автор: Антуанетта Янус (интернет)
Ссылки: Исходный код / Демо, Dribbble.com
Дата создания: 27 июня 2017 г.
900 04 Сделано с помощью: HTML, SCSS, JS
Теги: загрузка, полоса, градиент, маска
19. Pure CSS Progress Bars
Автор: Равикумар Чаухан (rkchauhan)
Ссылки: Исходный код / Демо
90 004 Дата создания: 7 февраля 2016 г.
Сделано с помощью: HTML, SCSS, JS
Теги: css, css3, html, progress-bar, progress
20.
Анимированная полоса прогресса навыков CSS3 9000 3
Css3 Строка прогресса
Автор: Шах Зобайер Ахмед (speeedsam)
Ссылки: Исходный код / Демо
Создано: 19 февраля 2016 г.
Сделано с помощью: HTML, CSS, JS
Метки: css3, prograss, bar, jquery, skill
21. Полоска прогресса попутного ветра Анимация мерцания
Полоска прогресса попутного ветра Анимация мерцания
Автор: Андре Прилли Курниаван ( oidre)
Ссылки: Источник Код / Демо
Создано: 4 августа 2020 г.
Сделано с: HTML, CSS
Метки: tailwind, tailwindcss, progress, progressbar, shimmer
22. Анимация индикатора выполнения при загрузке страницы (Bootstrap, только CSS)
Анимация индикатора выполнения при загрузке страницы. Bootstrap 3, кроссбраузерный, только CSS
Автор: Nathalia Xavier (tuiaverde)
Ссылки: Исходный код / демо
Создано: 24 октября , 2016
Сделано с: HTML, CSS
Теги: bootstrap, только css, анимация, кроссбраузерность
23. Индикаторы выполнения Material Design
Определенные и неопределенные индикаторы выполнения. Упрощенная версия, полученная из среды materialize: http://materializecss.com/preloader.html Эта версия нацелена на один элемент загрузчика из таблиц данных (datatables.net)
Автор: Эндрю Дж. Холден (holdencreative)
Ссылки: Исходный код / Демо
Дата создания: 13 марта 2015 г.
Сделано с помощью: HTML, CSS
Теги: дизайн материалов, индикатор выполнения, неопределенный, загрузчик
24.
Набор навыков Использование индикаторов выполнения HTML5 с анимацией CSS3
В этой демонстрации мы будем использовать элемент прогресса HTML5 для отображения набора навыков. Мы постараемся сделать это как можно более кросс-браузерным с достойными резервными методами для браузеров, которые их не поддерживают. На самом деле это пошаговое руководство по моей статье о хитростях CSS: http://css-tricks.com/html5-prog…
Подробнее
Автор: CSS-трюки (css-трюки)
Ссылки: Исходный код / демо
Создано: 9 марта 2016 г.
Сделано с: HTML, CSS
Теги: html5, css3, навыки
25. Индикатор выполнения с шагами в чистом CSS
Автор: Site Studio (sitestudioapp)
Ссылки: Исходный код / Демо
Создано: 3 июля 0, 2015
Изготовлено из: HTML, Меньше
26.
Чистый CSS Радиальный индикатор выполнения
Радиальный индикатор выполнения, использующий только CSS. Этот индикатор выполнения мне пришлось реализовать для одного из моих проектов, и codepen стал моей игровой площадкой. [Обновлено 2016 г.] Просто добавлен размер em вместо пикселей, теперь вы можете масштабировать его до любого размера, который вам нравится. \o/ [Обновлено 2018] Преобразование стилей на основе LESS по сравнению с…
Подробнее
Автор: Алексей Мариненко (jo-asakura)
Ссылки: Исходный код / Демонстрация
Создано: 28 февраля 2014 г.
Сделано с: HTML, SCSS
Теги: css, бар, радиальный, круглый, круг
27. Без названия
Автор : Anand Davaasuren (at80)
Ссылки: Исходный код / Демо
Создано: 20 марта 2013 г.
Сделано с: HTML, CSS 90 007
28.
Индикаторы выполнения
Простые стили индикатора выполнения. *Техника масштабирования фонового изображения Криса Койера: http://css-tricks.com/perfect-full-page-background-image/
Автор: Tyrus (tyrus)
Ссылки: Исходный код / Демо
Дата создания: 14 августа 2012 г.
Сделано с помощью: HTML, CSS
29. Анимированный индикатор выполнения Сасс. Просмотрите исходную статью и загрузите исходный код Sass/SCSS по адресу: www.cssflow.com/snippets/animated-progress-bar Исходный PSD от Вин Томаса. Протестировано в Firefox 4, Safari 5.1, Chrome 13, Opera 10, IE 9.(и новее).
Автор: haiqing wang (whqet)
Ссылки: Исходный код / Демо
Дата создания: 21 февраля 2014 г.
90 004 Сделано с: HTML, CSS
Теги: css3 , pure-css, индикатор выполнения, переход, загрузка
Индикатор выполнения | Bulma: Бесплатная современная CSS-инфраструктура с открытым исходным кодом на основе Flexbox
Progress Bar
Native HTML progress bar
Индикатор выполнения Bulma — это простой класс CSS, который стилизует собственный HTML-элемент .
Пример
15%
HTML
15%
Цвета #
Элемент индикатора выполнения доступен во всех
различных цветах, определенных картой $colors Sass.
Пример
15%
HTML
15%
Пример
30%
HTML
30%
Пример
45%
HTML
45%
Пример
60%
HTML
60%
Пример
75%
HTML
75%
Пример
90%
HTML
90%
Размеры #
Пример
20%
HTML
20%
Пример
40%
HTML
40%
Пример
60%
HTML
60%
Пример
80%
HTML
80%
Неопределенный #
Если вы не установите атрибут HTML value , вы можете отобразить индикатор выполнения с неопределенным значением .