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

12 февраля 2010 года, Размещено в категории: HTML / CSS

Анимированный прогресс бар

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

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

demo

Во второй элемент <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 файла






Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: