Создаем индикатор процесса с помощью CSS3

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

</pre>

<pre>

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

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

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

.progress-bar {

background-color: #1a1a1a;

height: 25px;

padding: 5px;

width: 350px;

margin: 50px 0;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;

-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;

box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;

}

.progress-bar span {

display: inline-block;

height: 25px;

width: 200px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;

-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;

box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;

-webkit-transition: width .4s ease-in-out;

-moz-transition: width .4s ease-in-out;

-ms-transition: width .4s ease-in-out;

-o-transition: width .4s ease-in-out;

transition: width .4s ease-in-out;

}

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

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

.blue span {

background-color: #34c2e3;

}

.orange span {

background-color: #fecf23;

background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));

}

.green span {

background-color: #a5df41;

background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));

}

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

.stripes span {

-webkit-background-size: 30px 30px;

-moz-background-size: 30px 30px;

background-size: 30px 30px;

color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),

color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),

color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),

to(transparent));

background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,

transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,