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

Author Автор: Роман Чернышов    Опубликовано: 22 ноября 2010

Хочу поделиться с вами, своим методом который я использую для создания прогресс бара, что это такое вы наверное имеете представление, но все же если нет то вкратце отпишу, что это и для чего.
Прогресс бар это как правило индикатор состояния готовности текущей операции или отображения завершенности в процентах. Также с помощью его можно строить графики. Например при создании голосования на своем сайте, вам понадобиться также и статистику по голосам. Вот тут то как раз на помощь и придет такое чудо как прогресс бар написанный с помощью 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. Можем задавать ему любой цвет, размер и описание.

1 Comment to “Прогресс бар CSS”

  • cakephp-fan 22.02.2011 в 12:24 пп

    Спасибо, отличный совет! Воспользовался уже.

    Правда абсолютное позиционирование у div.progress тут вроде особо не к чему.

    И чтобы внутри прогрессбара показывался процент загрузки, можно добавить внутрь div.progress ещё и такой див (его как раз и спозиционировать абсолютно):

    30%

    div.progress-text {
    position: absolute;
    top: 5px;
    left: 42px;
    z-index: 9999;
    color: #3F3F3F;
    font-size: 12px;
    }

Оставить комментарий

Автор блога
Чернышов Роман
Роман Чернышов
Веб-разработчик, Full Stack
Senior, Architector
PHP, JavaScript, Python, HTML 5, CSS 3, MySQL, Bash, Linux Admin
Заказать работу
предложить оффер

Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка