Если вы хотите скрасить свой сайт, добавив такую маленькую мелочь, но весьма приятную для посетителя сайта, а именно,- индикатора загрузки для сайта с использованием только возможностей CSS3, при этом мы не будим использовать никаких изображений, не смотря на это индикатор процесса получился весьма красивый при этом притягивающий взор пользователей сайта. Так, как CSS3 еще не введен в поддержку некоторыми браузерами, то полные эффекты мы можем наблюдать в Chrome, вот что у нас с этого получилось..

 

Для начала мы создадим разметку HTML, индикатор загрузки будет представлена элементом <div> с классом meter. Внутри <div> будет иметься элемент <span>

Начинаем стилизацию с помощью CSS-стилей, контейнер <div> является «корпусом» индикатора. Мы не будем устанавливать ширину, поэтому он будет растягиваться на всю ширину родительского элемента, что соответствует поведению блочного элемента по умолчанию.

А внутренний элемент <span> будет являться полоской заполнения индикатора прогресса. Мы будем выводить его как блочный элемент со значением высоты 100%:

Как Вы могли заметить, в нашем индикаторе постоянно движутся диагональные полоски, Мы можем получить прелестный эффект с помощью добавления элемента поверх нашего элемента <span>. В добавленном элементе будет использоваться повторяющийся градиент CSS3

Сейчас создаем анимацию полоски, стоит обратить внимание, что в некоторых браузерах полоски не отображаются в связи с отсутствием полной поддержки CSS3, поэтому, к сожалению, придется добавить дополнительный элемент <span>,  который будет анимироваться в браузерах WebKit.

Исключаем дублирование элемента:

В индикаторе будет перемещаться фон с изменением размеров:

  В заключении подключаем анимацию заполнения:

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

Такие параметры еще не поддерживаются, по этому подключим параметры jQuery:

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