Общее

Подключение и базовый шаблон

Подключение на PHP-странице

\Bitrix\Main\UI\Extension::load("ui.progressbar");

Базовый шаблон

.ui-progressbar имеет по умолчанию свойство display: flex.

<!-- .ui-progressbar > .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar">
	<div class="ui-progressbar-track">
		<div class="ui-progressbar-bar" style="width:70%;"></div>
	</div>
</div>

За прогресс отвечает элемент <div class="ui-progressbar-bar" style="width:70%;"></div>. В атрибут style в свойстве width вписаное значение будет определять размер шкалы прогресса. Для удобства рекомендуется записывать значения в %.

Размеры

LG

Модификатор .ui-progressbar-lg.

<!-- .ui-progressbar.ui-progressbar-lg > .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar ui-progressbar-lg">
	<div class="ui-progressbar-track">
		<div class="ui-progressbar-bar" style="width:30%;"></div>
	</div>
</div>

MD

Модификатор .ui-progressbar-md.

<!-- .ui-progressbar.ui-progressbar-md > .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar ui-progressbar-md">
	<div class="ui-progressbar-track">
		<div class="ui-progressbar-bar" style="width:30%;"></div>
	</div>
</div>

Цвета

Primary

Модификатор .ui-progressbar-primary. Цвет по умолчанию.

<!-- .ui-progressbar > .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar">
	<div class="ui-progressbar-track">
		<div class="ui-progressbar-bar" style="width:30%;"></div>
	</div>
</div>

<!-- .ui-progressbar.ui-progressbar-primary > .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar ui-progressbar-primary">
	<div class="ui-progressbar-track">
		<div class="ui-progressbar-bar" style="width:30%;"></div>
	</div>
</div>

Success

Модификатор .ui-progressbar-success.

<!-- .ui-progressbar.ui-progressbar-success> .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar ui-progressbar-success">
	<div class="ui-progressbar-track">
		<div class="ui-progressbar-bar" style="width:30%;"></div>
	</div>
</div>

Warning

Модификатор .ui-progressbar-warning.

<!-- .ui-progressbar.ui-progressbar-warning> .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar ui-progressbar-warning">
	<div class="ui-progressbar-track">
		<div class="ui-progressbar-bar" style="width:30%;"></div>
	</div>
</div>

Danger

Модификатор .ui-progressbar-danger.

<!-- .ui-progressbar.ui-progressbar-danger> .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar ui-progressbar-danger">
	<div class="ui-progressbar-track">
		<div class="ui-progressbar-bar" style="width:30%;"></div>
	</div>
</div>

Фон

Модификатор .ui-progressbar-bg добавляет фон. Цвет фона зависит от модификатора цвета, указанного для бара. Например, для .ui-progressbar.ui-progressbar-success фон будет светло-зеленым, как в примере ниже.

<!-- .ui-progressbar.ui-progressbar-bg > .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar ui-progressbar-bg">
	<div class="ui-progressbar-track">
		<div class="ui-progressbar-bar" style="width:30%;"></div>
	</div>
</div>

<!-- .ui-progressbar.ui-progressbar-bg.ui-progressbar-success > .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar ui-progressbar-bg ui-progressbar-success">
	<div class="ui-progressbar-track">
		<div class="ui-progressbar-bar" style="width:30%;"></div>
	</div>
</div>

Текст

Текст может быть либо перед, либо после бара. Для этого есть 2 контейнера с определенными классами .ui-progressbar-text-before и .ui-progressbar-text-after соответственно.

<!-- .ui-progressbar > .ui-progressbar-text-before + (.ui-progressbar-track > .ui-progressbar-bar) + .ui-progressbar-text-after -->
<div class="ui-progressbar">
	<div class="ui-progressbar-text-before">Выполняется удаление</div>
	<div class="ui-progressbar-track">
		<div class="ui-progressbar-bar" style="width:30%;"></div>
	</div>
	<div class="ui-progressbar-text-after">594 из 80 042</div>
</div>

Прочее

Что бы расположить элементы прогрессбара в столбик, используйте модификатор .ui-progressbar-column.

<!-- .ui-progressbar.ui-progressbar-column > .ui-progressbar-text-before + (.ui-progressbar-track > .ui-progressbar-bar) + .ui-progressbar-text-after -->
<div class="ui-progressbar ui-progressbar-column">
	<div class="ui-progressbar-text-before">Выполняется удаление</div>
	<div class="ui-progressbar-track">
		<div class="ui-progressbar-bar" style="width:30%;"></div>
	</div>
	<div class="ui-progressbar-text-after">594 из 80 042</div>
</div>

Также можно использовать цветовые палитры. Будет это выглядеть так:

<!-- .ui-progressbar.ui-progressbar-warning.ui-progressbar-bg > .ui-progressbar-text-before + (.ui-progressbar-track > .ui-progressbar-bar) + .ui-progressbar-text-after -->
<div class="ui-progressbar ui-progressbar-warning ui-progressbar-bg">
	<div class="ui-progressbar-text-before">Выполняется удаление</div>
	<div class="ui-progressbar-track">
		<div class="ui-progressbar-bar" style="width:30%;"></div>
	</div>
	<div class="ui-progressbar-text-after">594 из 80 042</div>
</div>