Анимированный прогресс бар с помощью CSS
12 февраля 2010 года, Размещено в категории: HTML / 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 файла