недавно мне понадобился код вывода на страничку "полоски прогресса", то есть я переделывал один модуль и чтобы пользователи были в курсе того, как движется работа, я "нарисовал" полоску прогресса с выводом данных.
для удобства применения я её оформил как bbcode.
вот решил поделиться. вдруг кому и пригодится такой небольшой хак.
выглядеть будет примерно так:
56%
Разумеется, это "полный конструктор", как я обычно и предлагаю. все параметры очень легко поменять.
вот так, например, может выглядеть "тёмный вариант":
56%
в общем - всё в ваших руках. экспериментируйте.
создаётся он так (светлый вариант):
Использование BBCode
Код: Выделить всё
[progress={NUMBER}]{TEXT}[/progress]Замена 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>Подсказка
Код: Выделить всё
[progress=проценты]текст[/progress]теперь пояснения:
по коду 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} - надпись на индикаторе, устанавливаемая пользователем
вроде всё.
может кому пригодится.
а вот пришло в голову небольшое украшение (выглядит так):
60%
код
то есть, как я говорил - простор для фантазии большой. :-D
для адаптации к мобильному стилю размеры лучше задавать в процентах.
то есть для основного блока width:98%; (100% не стоит ставить) и отступ надписи в процентах left:40%;
тогда этот bbcode будет адаптирован к мобильному стилю.
56%
код