элемент HTML5 Progress

HTML5 Progress — оформляем красивые прогресс-бары с помощью CSS3

HTML5 Progress – это современный элемент новой спецификации, который представляет собой процентный индикатор с линией показателя.

Ни один UI Kit набор не останется без демонстрации элементов прогресс баров. Тег progress в настоящее время поддерживается всеми современным браузерами и представляет собой шкалу с индикатором «заполненности». Однако, стандартное оформление данного элемента у разных обозревателях оставляет желать лучшего. В большинстве своем это одноцветные полосы, скучные и неинтересные.

Используем CSS3 для оформления HTML5 Progress

Сегодня можно найти не мало плагинов JavaScript, которые создадут Вам полный реворк прогресс баров. Но наша цель стоит в простом и изящном решении. Обозначим HTML структуру:

Как видно из кода, мы используем тег progress совместно с атрибутами max и value. Эти интуитивно понятные параметры задают максимальное и текущее значение.

Перейдем к стилизации:

WebKit-браузеры обеспечивают два псевдо-класса, которые можно использовать в стиле HTML5 Progress элемента:

Давайте оживим наш пример немного, используя псевдо-элементы:

Firefox обеспечивает один псевдокласс в стилях элемента:

Резервный метод, стили:

Процент автоматически изменится, как только мы поменяем значение ширины бара:

Аналогично, для Mozilla. К сожалению, комбинируя стили для разных браузеров это может повлиять на отображение в любом другом браузере. Следовательно, нужен отдельный блок.

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

Полный код примера Вы можете взять с Pen`а по ссылке выше. Удачи!

743 просмотров
В поисках шаблона для сайта?