Визуальность

Редактор

Основа

10%

Основа

</div>

HTML код блока.

Размер

10%

Размер

</div>

50%

</div>

80%

</div>

Можно менять размер индикатора.

Цвета

10%

Цвета

											<div class="lis s-light s-small">
												<div class="progress c-violet" style="width: 10%">
<div class="value">10%</div>
</div>

											</div>
										

20%

											<div class="lis s-light s-small">
												<div class="progress c-grey" style="width: 20%">
<div class="value">20%</div>
</div>

											</div>
										

30%

											<div class="lis s-light s-small">
												<div class="progress c-red" style="width: 30%">
<div class="value">30%</div>
</div>

											</div>
										

50%

											<div class="lis s-light s-small">
												<div class="progress c-blue" style="width: 50%">
<div class="value">50%</div>
</div>

											</div>
										

70%

											<div class="lis s-light s-small">
												<div class="progress c-green" style="width: 70%">
<div class="value">70%</div>
</div>

											</div>
										

90%

											<div class="lis s-light s-small">
												<div class="progress c-orange" style="width: 90%">
<div class="value">90%</div>
</div>

											</div>
										

100%

											<div class="lis s-light s-small">
												<div class="progress c-pink" style="width: 100%">
<div class="value">100%</div>
</div>

											</div>
										

Изменение цвета индикатора.

Комбинированность (без цифр)

</div>

Индикатор состоящий из нескольких полос.

Комбинированность (с цифрами)

25%

30%

15%

20%

Комбинированность (с цифрами)

</div>

</div>

</div>

</div>

</div>

Альтернатива предыдущему но с цифрами.

Закругленные углы

25%

Закругленные углы

</div>

</div>

<div class="lis s-light s-medium b-circle">

</div>

</div>

<div class="lis s-light s-big b-circle">

</div>

У среднего и большого индикатора - уголки закругляются.
А у маленького - нет.

Индикатор с описанием

10%

30%

60%

Lorem.

Lorem ipsum.

Lorem ipsum dolor.

Индикатор с описанием

											<div class="lis s-light s-big">
												<div class="progress c-orange" style="width: 10%">
<div class="value">10%</div>
</div>
<div class="progress c-red" style="width: 30%">
<div class="value">30%</div>
</div>
<div class="progress c-blue" style="width: 60%">
<div class="value">60%</div>
</div>

											</div>
											

<div class="lis-box">
												<div>
<div class="c-orange"></div>
<span>Lorem.</span>
</div>
<div>
<div class="c-red"></div>
<span>Lorem ipsum.</span>
</div>
<div>
<div class="c-blue"></div>
<span>Lorem ipsum dolor.</span>
</div>

											</div>
										

Возможно создание индикатора с небольшим описанием.

Темная версия

10%

30%

60%

10%

30%

60%

10%

30%

60%

Темная версия

</div>

</div>

</div>

</div>

<div class="lis s-light s-medium s-night">

</div>

</div>

</div>

</div>

<div class="lis s-light s-big s-night">

</div>

</div>

</div>

Темная версия индикатора (для темного фона страницы).

Демо на отдельной странице

Посмотреть

Использованные Цвета

#d9534f Красный	#2196F3 Синий
#4CAF50 Зеленый	#f0ad4e Оранжевый
#9A55D8 Фиолетовый	#F321D8 Розовый
#bbbbbb Серый

Авторы

RuNN