Прогресс бар CSS

Роман Чернышов    CSS, HTML     css, прогресс бар Комментариев 1 Дата 22 Ноя

Хочу поделиться с вами, своим методом который я использую для создания прогресс бара, что это такое вы наверное имеете представление, но все же если нет то вкратце отпишу, что это и для чего.
Прогресс бар это как правило индикатор состояния готовности текущей операции или отображения завершенности в процентах. Также с помощью его можно строить графики. Например при создании голосования на своем сайте, вам понадобиться также и статистику по голосам. Вот тут то как раз на помощь и придет такое чудо как прогресс бар написанный с помощью CSS и без использование картинок, что несомненно плюс!

Для создания прогресс бара понадобиться всего два блока DIV и соответствующие стили для них, причем один блок будет вложен в другой, заполняя его другим цветом именно настолько процентов, насколько завершена текущая операция (текущее событие).

Стили блоков прогресс бара:

div.progress {
overflow: hidden;
position: absolute;
top: 118px;
left: 1px;
width: 100px;
height: 5px;
border: 1px solid #B9A059;
background: #E3C0D1;
margin:0;
padding: 0;
}
div.progress_load {
height: 5px;
border: 1px solid #B9A059;
background: #995274;
margin:0;
padding: 0;
z-index: 999;
}

HTML код:

<div class="progress" title="Заполнение 30%"><div class="progress_load" style="width: 30px;"></div></div>

Обратите внимания, что в HTML коде используется также стиль указывающий ширину вложенного блока style=»width:75px» именно этот стиль указывает то количество процентов, на которое будет заполнен основной блок. Это удобно еще и тем, что если страница генерируется например PHP, то вы можете вставлять любое значение длины внутреннего блока.

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

В итоге мы имеем универсальный прогресс бар, работающий во всех современных браузерах, а так же в стареньком ослике IE6. Можем задавать ему любой цвет, размер и описание.