Как создать индикатор выполнения (progress bar) на CSS3
Поиск

Как создать индикатор выполнения (progress bar) на CSS3

Nikel, 30.04.2019

Проблема заключается в том, что раньше было невозможно создать анимацию прогресс бара без использования JavaScript, но благодаря появлению CSS3 теперь можно выполнять анимацию, использовать градиенты для div. На самом деле HTML5 также имеет специальный элемент индикатора выполнения, созданный именно для этой цели, об использовании этого элемента читайте дальше в статье.

Разметка HTML

Код прогресс бара довольно прост. Для разметки мы будем использовать div с классом .container, в котором будет содержаться все другие используемые элементы: заголовок(div с классом .title) и непосредственно сам индикатор выполнения(div.bar).

Следующим шагом мы поместим внутри элемента .bar еще два элемента span, которые будут показывать заполненную и незаполненную части индикатора выполнения, назовем их соответственно .bar-unfill and .bar-fill.

Добавляем анимацию и стили CSS

Простой прогресс бар

Зададим для класса .container ширину в процентах, чтобы сделать индикатор адаптивным(подстраивающимся под ширину экрана). Кроме этого, оформим внешний вид прогресс бара, укажем для границ класса заголовка .title  border-radius.

Теперь оформим незаполненную часть индикатора и зададим ему фон белого цвета.

Затем зададим стиль для класса .bar, укажем его ширину 100%. Он будет содержать как заполненную, так и незаполненную части. А для класса .bar-fill мы определим ширину 0% в качестве начальной ширины.

Также добавим transition CSS3, чтобы сделать анимацию плавной. И, наконец, мы добавим саму анимацию CSS3, свойство animation будет содержать имя анимации, продолжительность и  ключевое слово infinate, которое задает бесконечное повторение aнимации.

Чтобы теперь анимировать все это, используем правило CSS3 @keyframes и укажем  ширину от 0 до 100%, для начального и конечного значений.  Анимация будет представлять собой плавный переход ширины width от одного ключевого кадра к другому, при этом браузер будет сам вычислять промежуточные значения между кадрами.

Демонстрационный пример

Прогресс бар с полосками

Для индикатора прогресса с полосками мы переименуем класс .bar-fill в .bar-fill-stripes. Мы будем использовать линейный градиент, свойство background-image. Остальная часть анимации CSS3 и перехода останется прежней.

Демонстрационный пример

Прогресс бар с трекером

Теперь попробуем создать трекер для  индикатора выполнения. Для этого немного скорректируем нашу разметку и CSS, класс .bar-fill заменим на .bar-fill-tracker.

Как видно из кода, также добавились элементы с классами .track-wrap и .track внутри элемента .bar-unfill. Напишем стили для .track-wrap и .track и анимируем индикатор прогресса с помощью другого правила @keyframes.

Как вы можете видеть выше, в классе-обертке .track-wrap установлено положение top -18px. Элемент класса .track, фактически является  трекером (движущимся кругом), для него задан border-radius  в 10px, чтобы придать ему круглую форму.

Демонстрационный пример

Индикатор выполнения на HTML5

В наших первых первых примерах мы использовали элементы div и span для создания индикатора прогресса, но в настоящее время, как уже упоминалось выше, мы можем использовать новые элементы и возможности html5.

Базовая html-разметка

В HTML5 прогресс бар добавляется с помощью тега <progress>. Внутри этого тега мы можем устанавливать такие атрибуты как value(текущее значение), а также минимальное и максимальное значения min и max.

Теперь объединим этот элемент с разметкой, которая была у нас выше

Стили  для индикатора

Здесь мы просто изменили  span с классом .bar-fill на тег индикатора выполнения progress. Чтобы изменить стиль прогресс бара, нам нужно добавить некоторые псевдоклассы Webkit и Mozilla.  progress::-webkit-progress-bar и progress отвечают за стили самого индикатора состояния, а progress::-webkit-progress-value и progress::-moz-progress-bar — за стили бегунка.

Демонстрационный пример