Индикатор прогресса является неотъемлемой частью почти любого сайта. Обычно он используется для отображения состояния загрузки или какого либо другого процесса на сайте. Делаете ли вы веб-приложение или просто сайт, наверняка вам потребуется данный элемент интерфейса. В данном уроке мы сделаем стильный и анимированный индикатор прогресса с помощью правил CSS3. Все выглядит достаточно эффектно и будет радовать взор посетителей во время загрузки. Вот как это будет выглядеть..

 
Раньше мы уже публиковали подобные индикаторы. И так, начнем. Первым шагом будет создание HTML-разметки, которая достаточно простая:

Вот некоторые параметры которые могут быть полезны:

  • .progress-bar – определяет общий стиль нашего индикатора прогресса;
  • .blue – определяет стиль CSS, в данном случае используется набор правил для голубого стиля;
  • .stripes – тип анимации для индикатора прогресса;
  • span – данный элемент помогает заполнять индикатор прогресса. Встроенный стиль widthопределяет степень заполнения.

Теперь рассмотри сами стили CSS, для индикатора процесса:

Вот получается вот что у нас:

Добавим цвета и градиенты:

Теперь определим полоски:

Добавим глянец:

И последним будет свечение:

А вот что получается в старых браузерах:

Индикатор сохраняет свою работоспособность, но теряет внешний блеск. Вот на этом все. Удачных Вам экспериментов. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.