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

Author Роман Чернышов    Category CSS, HTML     Tags , Комментариев 1 Дата 22 Ноя

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

progress bar2 Прогресс бар 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>

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

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

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

progress bar Прогресс бар CSSВ итоге мы имеем универсальный прогресс бар, работающий во всех современных браузерах, а так же в стареньком ослике 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;
    }

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

Консультации

Консультант Чернышов Р.В. Зайдайте вопрос на любую из тем:
Бесплатно и без регистрации!

Задать вопрос
Все вопросы
Последние вопросы
Поиск по блогу
Категории
Архив
Новое на сайте
Портфолио Все работы


www.detskiy-mir.net
www.detskydoctor.ru
www.betelit.ru
www.all-alliance.ru
www.videogonok.ru
www.carpfishing.by
www.property-greek.com
www.domcons.ru

с 2009 года по сегодняшний день, создано более 300 сайтов...