недавно мне понадобился код вывода на страничку "полоски прогресса", то есть я переделывал один модуль и чтобы пользователи были в курсе того, как движется работа, я "нарисовал" полоску прогресса с выводом данных.
для удобства применения я её оформил как bbcode.
вот решил поделиться. вдруг кому и пригодится такой небольшой хак. 
выглядеть будет примерно так:
Разумеется, это "полный конструктор", как я обычно и предлагаю. все параметры очень легко поменять.
вот так, например, может выглядеть "тёмный вариант":
в общем - всё в ваших руках. экспериментируйте.
создаётся он так (светлый вариант):
Использование BBCodeЗамена HTMLКод: Выделить всё
<div style="position:relative;width:600px;height:50px;background:white;padding:5px;border:1px solid #c1c1c1;">
<div style="width:{NUMBER}%;height:50px;background:#32CD32;"></div>
<span style="position:absolute;top:20px;left:200px;color:black;font-size:1.2em;font-weight:normal">{TEXT}</span>
</div>:
по коду html:
width:600px;height:50px; - ширина и высота основного блока
background:white; - цвет основного блока (белый)
padding:5px; - отступ внутри блока (расстояние до полоски)
border:1px solid #c1c1c1; - бордер, "окантовка" основного блока (серый)
width:{NUMBER}%; - установка пользователем (в процентах) длины индикатора полоски
height:50px; - ширина полоски индикатора
background:#32CD32; - цвет полоски индикатора (зелёный)
top:20px;left:200px; - установка положения вывода надписи на индикаторе. отступ сверху и слева
color:black; - цвет надписи
font-size:1.2em; - размер шрифта надписи
font-weight:normal" - толщина шрифта (жирный - bold)
{TEXT} - надпись на индикаторе, устанавливаемая пользователем
вроде всё.
может кому пригодится.
а вот пришло в голову небольшое украшение (выглядит так):
код
Код: Выделить всё
<div style="position:relative;width:600px;height:30px;background:white;padding:5px;border:1px solid #c1c1c1;">
<div style="width:{NUMBER}%;height:25px;background:#32CD32;padding-top:5px;"><MARQUEE LOOP="100"INFINITE SCROLLDELAY="1" SCROLLAMOUNT="4" DIRECTION=right onmouseover="this.stop()" onmouseout="this.start()"><span style="color:white;"> | </span></MARQUEE></div>
<span style="position:absolute;top:10px;left:300px;color:black;font-size:1.2em;font-weight:normal">{TEXT}</span>
</div>здесь встроен "движущийся текст":
SCROLLAMOUNT="4" - скорость движения полоски
то есть, как я говорил - простор для фантазии большой. :-D
для адаптации к мобильному стилю размеры лучше задавать в процентах.
то есть для основного блока
width:98%; (100% не стоит ставить) и отступ надписи в процентах
left:40%;тогда этот bbcode будет адаптирован к мобильному стилю.
код
Код: Выделить всё
<div style="position:relative;width:98%;height:30px;background:white;padding:5px;border:1px solid #c1c1c1;">
<div style="width:56%;height:25px;background:#32CD32;padding-top:5px;"><MARQUEE LOOP="100"INFINITE SCROLLDELAY="1" SCROLLAMOUNT="4" DIRECTION=right onmouseover="this.stop()" onmouseout="this.start()"><span style="color:white;"> | </span></MARQUEE></div>
<span style="position:absolute;top:10px;left:40%;color:black;font-size:1.2em;font-weight:normal">56%</span></div>
