Простой progress bar
Надо сделать вот такой прогресс-бар. При этом просто со стороны верстки, так и чтобы изменения процентов не вело к заумному программированию.
Изобретать велосипед тут не надо.
Всего сделать тэги для углов и HR в качестве указателя прогресса. Код получается таким:
<style>
#progress-bar{ width:234px; position:relative; padding:0;}
#progress-bar dd{ background:transparent url(/img/button.gif) no-repeat scroll 100% 0pt;
text-align:center; height:26px; margin:0; }
#progress-bar dd hr{
margin:0; margin-top:1px; height:24px; border: none 0px;
position:absolute;
background:transparent url(/img/profil_load.gif) top left; z-index: 0;
}
#progress-bar dd i{ display:block; height:26px; z-index:2; position:relative;
background:transparent url(/img/profil_load1.gif) no-repeat scroll 0pt 1px;}
#progress-bar dd i.l_0{ background:none;}
#progress-bar dd b{ display:block; height:26px; }
#progress-bar dd b.r_100{
background:transparent url(/img/profil_load.gif) no-repeat scroll 100% -26px; }
</style>
<dl id='progress-bar'>
<dd><hr style="width:50%"><i class="l_100"><b class="r_100">50%</b></i></dd>
</dl>
Как же это работает? Если процент =0, то для угла i срабатывает правило #progress-bar dd i.l_0 и не показывается закрашеный уголок.
Если 100%, то вместе с правилом #progress-bar dd i.l_100 работает и #progress-bar dd b.r_100.
Указатель HR рассползается в зависимости от процента. При этом он имеет меньший z-index и всегда показывается на фоне углов и подписи процентов.
Благодаря этому имея шаблон
<dl id='progress-bar'>
<dd>
<hr style="width:{procent}%">
<i class="l_{procent}">
<b class="r_{procent}">{procent}%</b>
</i>
</dd>
</dl>
на выходе после преобразования серверной частью будем иметь правильные указания процента. Это проще, чем делать какие-то манипуляции в CSS, считать количество пикселей, чтобы указать длину прогресс-бара и т.д.
Покажу этот код уже с указанием разных процентов.
1. 25%.
Код HTML:
<dl id='progress-bar'>
<dd><hr style="width:25%"><i class="l_25"><b class="r_25">25%</b></i></dd>
</dl>
Имеем на выходе:
2. 50%.
Код HTML:
<dl id='progress-bar'>
<dd><hr style="width:50%"><i class="l_50"><b class="r_50">50%</b></i></dd>
</dl>
Имеем на выходе:
3. 0%.
Код HTML:
<dl id='progress-bar'>
<dd><hr style="width:0%"><i class="l_0"><b class="r_0">0%</b></i></dd>
</dl>
Имеем на выходе:
4. 100%.
Код HTML:
<dl id='progress-bar'>
<dd><hr style="width:100%"><i class="l_100"><b class="r_100">100%</b></i></dd>
</dl>
Имеем на выходе:
Остальное – дело техники. Насколько я знаю, то это ещё под ослик надо покрутить. Если надо попробывать, то тут можно менять проценты.