Шкала прогресса
Bootstrap предлагает компонент для отображения шкалы прогресса на веб-сайте. Такая шкала обычно используются чтобы предоставить пользователю обратную связь о ходе выполнения определённого процесса или действия. Пользователи могут визуально понять, сколько всего выполнено и сколько ещё осталось до завершения.
Шкала прогресса по умолчанию
Чтобы создать шкалу прогресса по умолчанию, используйте класс .progress с вложенным в него .progress-bar .
Контекстные классы
Вы можете использовать контекстные классы, чтобы включить дополнительную семантику через цвет.
Полоски
Вы можете сделать шкалу с полосками, добавив класс .progress-bar-striped к элементу .progress-bar .
Анимированные полоски
Вы можете анимировать полоски, добавив класс .progress-animated к элементу .progress .
В ранней версии Bootstrap 4 Alpha для шкалы прогресса использовался элемент . Однако от этого метода отказались в в Alpha 6.
См. также
- accent-color
- Продвинутая семантика и доступность
Автор: Йен Диксон
Последнее изменение: 12.03.2020
- Что такое Bootstrap?
- Начало работы с Bootstrap 4
- Контейнеры Bootstrap 4
- Система сеток Bootstrap 4
- Типографика в Bootstrap 4
- Таблицы в Bootstrap 4
- Формы в Bootstrap 4
- Пользовательские формы
- Кнопки в Bootstrap 4
- Изображения в Bootstrap 4
- Выпадающее меню
- Группа кнопок
- Группа ввода
- Сворачивание содержимого
- Навигация
- Панель навигации
- Хлебные крошки
- Нумерация страниц
- Значки
- Джамботрон
- Уведомления
- Модальное диалоговое окно
- Шкала прогресса
- Медиа-объекты
- Группа списков
- Карточки
- Адаптивное встраивание
- Карусель
- Всплывающие подсказки
- Информеры
- Отслеживание прокрутки
Как сделать прогресс бар
Темой сегодняшнего урока, будет создание прогресс бара. Это длинная полоска, которая заполняется цветом, по мере выполнения какой-либо задачи, например загрузки файла.
Впрочем прогресс бар может выглядеть и по другому. Смысл его состоит в том, чтобы чем-то занять пользователя, на время выполнения невидимого процесса.
Веб-разработчики, вообще-то редко сталкиваются с индикатором загрузки, но не спешите уходить. Вам стоит отнестись к этому уроку, как к великолепной возможности, погрузиться в мир языка программирования JavaScript, не столько ради прогресс бара, а увидеть на конкретном примере, как работает JavaScript.
Демонстрация примера
HTML разметка
На скриншоте отчетливо видно, что индикатор загрузки представляет собой зеленый блок div внутри серого div-а. Зеленая полоска постепенно должна закрыть собой серую. Запускается эта анимация, кликом по кнопке Пуск, у тега button значение атрибута onclick, такое же как и название функции – move.
CSS стилизация
Серая полоса на всю ширину браузера.
#greyProgress width: 100%;
background-color: #ddd;
>
В состоянии покоя, зеленая полоса занимает 10% ширины относительно серой.
#greenBar width: 10%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
>
JS код
JavaScript заставит двигаться зеленую полоску до конца с весело меняющимися процентами.Создадим функцию с названием move, которая получит элемент (elem) с id greenBar (зеленая полоска).
function move() var elem = document.getElementById(«greenBar»);
Объявим переменную width, приравненную к числовому значению 10.
Переменная с названием id содержит метод setInterval с двумя аргументами, frame (ещё одна функция) и 10 (время задержки в милисекундах). Задержка нужна для того, чтобы вы видели эффект. Метод setInterval, запускает функцию с интервалом в 10 мс.
var 10);
function frame()
Функция frame состоит из условия, при котором если ширина больше или равна 100, тогда надо остановить исполнение функции, вызвав метод clearInterval, который прекращает запланированное исполнение кода, установленное методом setInterval.
На практике это означает, что как только зеленая полоска дойдет до 100 процентов, задание выполнено и необходимо его остановить.
В противном случае, надо инкрементировать ширину. Это когда, два знака «++», увеличивают значение переменной width на 1.
Здесь мы уточняем, что ширина, указанная в стилях у элемента c id greenBar (elem), будет увеличиваться на 1%.
Эта строка создает эффект прибавления процентов на прогресс баре.
Создано 23.11.2018 10:00:00
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.
Делаем индикатор прогресса с использованием только CSS
В данном уроке мы сделаем индикатор прогресса с использованием только CSS3, никаких изображений. Несмотря на это, дизайн индикатора будет вполне приличный.
Впечатление немного портит Opera 11, которая поддерживает CSS3, но не полностью.
Браузеры, которые совсем не поддерживают CSS3, будут выводить индикатор прогресса, но вид его будет совсем уж простым.
HTML
Полоска будет представлена элементом с классом meter . Внутри будет иметься элемент , который будет работать как заполненная часть индикатора прогресса. Процент заполнения будет устанавливаться встроенным указанием стиля, так как именно разметка HTML содержит информацию о проценте заполнения индикатора. Альтернатива CSS в виде отдельного файла будет выглядеть как «fill-10-percent», «fill-one-third» или что-то подобное, что является более тяжеловесным решением, обладающим меньшей гибкостью при использовании.
Начало CSS
Контейнер является «корпусом» индикатора. Мы не будем устанавливать ширину, поэтому он будет растягиваться на всю ширину родительского элемента, что соответствует поведению блочного элемента по умолчанию. Вы можете сделать так, как нужно вам. Высота также устанавливается произвольно. В нашем примере установлено значение 20 px для высоты, но она может быть любой. Также используются закругленные углы и тени для улучшения внешнего вида индикатора.
.meter < height: 20px; /* Может быть любой */ position: relative; background: #555; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; padding: 10px; -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3); -moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); >
А внутренний элемент будет являться полоской заполнения индикатора прогресса. Мы будем выводить его как блочный элемент со значением высоты 100%, так что он будет растягиваться на все доступное пространство. Также используется набор правил CSS3 для задания градиента и скругления углов.
.meter > span
Другие цвета
Сделаем так, чтобы менять цвета было просто. Добавим класс «orange» или «red» к контейнеру и изменим его цвет.
.orange > span < background-color: #f1a165; background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a)); background-image: -webkit-linear-gradient(#f1a165, #f36d0a); >.red > span
Диагональные полоски
Мы можем получить прелестный эффект с помощью добавления элемента поверх нашего элемента . В добавленном элементе будет использоваться повторяющийся градиент CSS3. Семантически для достижения результата лучше всего использовать псевдо элемент. Мы будем использовать абсолютное позиционирование над областью элемента (который позиционируется относительно) и зададим для него скругленные углы.
.meter > span:after
Анимируем диагональные полоски
Только Firefox 4 может анимировать псевдо элементы, а только браузеры WebKit могут выполнять анимации с ключевым кадром. Поэтому, к сожалению, придется добавить дополнительный элемент , который будет анимироваться в браузерах WebKit.
Элемент будет такой же, как и псевдо элемент. Поэтому мы можем использовать те же значения.
.meter > span:after, .animate > span > span. только исключим дублирование:
.animate > span:afterМы будем перемещать фон и изменять его размер:
@-webkit-keyframes move < 0% < background-position: 0 0; >100% < background-position: 50px 50px; >>И вызываем анимацию:
.meter > span:after, .animate > span > span
Анимируем заполнение индикатора
К сожалению, мы не сможем анимировать естественным образом процесс изменения ширину от 0 до установленного во встроенном стиле значения.
@-webkit-animation expandWidth < 0% < width: 0; >100% < width: auto; >>Такой формат еще не поддерживается нигде. Поэтому придется использовать jQuery. Измеряем оригинальную ширину, изменяем ее на 0, а затем анимируем процесс восстановления до оригинального значения:
$(".meter > span").each(function() < $(this) .data("origWidth", $(this).width()) .width(0) .animate(< width: $(this).data("origWidth") >, 1200); >);А как же HTML5?
HTML5 имеет специальную опцию для таких задач: и ! Да, но есть некоторые шероховатости. Данные элементы имеют весьма специфический вид. По умолчанию они выглядят как индикатор прогресса на Mac:
Вы может отключить стиль по умолчанию:
progress
Так можно удалить глянец, который присутствует по умолчанию. Но вы все еще будете весьма ограниченны в возможностях по изменению элемента. Можно слегка поменять внешний вид следующими командами:
progress::-webkit-progress-bar-value
. на этом возможности по изменению внешнего вида элемента заканчиваются. Кроме того, внешний вид будет очень сильно различаться в разных браузерах, даже в семействе WebKit. псевдо элементы также несовместимы с таким решением.
Так что на текущий момент решение с парой div/span является очень хорошим вариантом.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/css3-progress-bars/
Перевел: Сергей Фастунов
Урок создан: 10 Марта 2011
Просмотров: 35741
Правила перепечатки5 последних уроков рубрики "CSS"
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Как сделать заполняющуюся шкалу в html
Используется для отображения прогресса завершенности задачи. Изменение значения происходит через JavaScript.
Синтаксис
Атрибуты
value Текущее значение прогресса. max Максимальное значение прогресса.
Закрывающий тег
HTML 5 IE 10 Cr Op Sa 5.2 Fx
progress Пожалуйста, подождите, фотографии загружаются.
Результат примера в браузере Opera показан на рис. 1.
Статьи по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы