Анимированный прогресс бар с помощью CSS

Сегодня я хочу показать как можно создать анимированный индикатор прогресс бара, используя чистый CSS.
Трюк очень прост. Все что нам нужно для того, чтобы создать прогресс бар, это один контейнер (<p>) и два вложенных тега (<span> и <em>).

Как оно работает??
Первый элемент <span> будет у нас в качестве индикатора (тоесть нашим прогресс баром).  В элемент <span> мы размещаем нашу анимацию, шириной 200px, она будет у нас фоном.

Во второй элемент <em> мы вставим изображение с шириной 1px и в высоту как наш индикатор. Мы будем задавать проценты, и изображение в элементе <em> будет закрывать собой анимацию. Таким образом нам будет виден только тот кусок анимации, который не закрыт 1px изображением.

25%

.progressBar{
width:216px;
height:41px;
background:url(bg_bar.gif) no-repeat 0 0; /*подключаем рамку*/
position:relative;
}
.progressBar span{
position:absolute;
display:block;
width:200px;
height:25px;
background:url(bar.gif) no-repeat 0 0; /*подключаем анима.*/
top:8px;
left:8px;
overflow:hidden;
text-indent:-8000px;
}
.progressBar em{
position:absolute;
display:block;
width:200px;
height:25px;
background:url(bg_cover.gif) repeat-x 0 0; /*подключаем 1px изобра.*/
top:0;
}

В этом примере был использую прогресс бар с шириной в 200px. Тогда и элемент <em> является также 200px в ширину. Таким образом, каждый процент на прогресс баре будет равен 2px в ширину (1% = 2px).
Если нам нужно, чтобы на индикаторе было 50% тогда ставим 100px, если 80% = 160px;
23% = 46px просто каждый процент умножаем на 2 🙂

Вот и весь урок,  все  что Вам нужно для своего индикатора, это сделает свою анимацию индикатора.

Мой блог находят по следующим фразам
• скрипты фотогалерея на html
• за сколько был куплен домен vk.com
• flash плееры для сайта
• папка на сайте с фото без применения галереи
• плавный скроллинг вниз
• создание js файла