API

Подключение и использование

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

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

Использование

Метод getContainer() возвращает верстку прогресс-бара.

var myProgress = new BX.UI.ProgressBar({ 
	/*[options]*/ 
});

myProgress.getContainer()

С версии UI 21.800 появились методы:

finish() - метод позволяющий завершить прогресс досрочно.

isFinish() - метод, проверяющий статус.

renderTo(element) - метод, в котором можно указать ноду для рендеринга прогрессбара.

destroy() - метод уничтожает экземпляр прогрессбара.

Размер

size определяет размер прогрессбара. Может принимать не только определенные текстовые значения, но и число. Высота бара, трека и радиуса рассчитается автоматически.

var myProgress = new BX.UI.ProgressBar({ 
	size: BX.UI.ProgressBar.Size.LARGE
});

//------------

myProgress.getContainer()

Возможные значения:

BX.UI.ProgressBar.Size.LARGE
BX.UI.ProgressBar.Size.MEDIUM //Default

Цвет

color Определяет цвет прогресс бара.

var myProgress = new BX.UI.ProgressBar({ 
	color: BX.UI.ProgressBar.Color.PRIMARY
});

//------------

myProgress.setColor(BX.UI.ProgressBar.Color.SUCCESS);

Возможные значения:

BX.UI.ProgressBar.Color.PRIMARY //Default
BX.UI.ProgressBar.Color.SUCCESS
BX.UI.ProgressBar.Color.WARNING
BX.UI.ProgressBar.Color.DANGER

Кастомные цвета

Можно установить собственные цвета через опции colorBar: "#f00" для бара и colorTrack: "#ff0" для трека, а также методами setColorBar("#f00") и setColorTrack("#ff0") соответственно.

Фон

fill {boolean} добавляет фон. Цвет фона зависит от модификатора цвета указанного для бара. По умолчанию false.

BX.UI.ProgressBar({ 
	fill: true
});

Счетчик прогресса

Счетчик прогрессса может принимать любые значения {number}.

maxValue {number} - определяет максимальное значение прогресс-бара. (по умолчанию: 100)

value {number} - текущее значение прогрессбара. (по умолчанию: 0)

statusType - определяет как отображать прогрес:

BX.UI.ProgressBar.Status.PERCENT //Default. Отображать прогрес в %.
BX.UI.ProgressBar.Status.COUNTER //Отображать прогрес счетчиком

Пример на процентах:

var myProgress = new BX.UI.ProgressBar({ 
	maxValue: 2000,
	value: 500,
	statusType: BX.UI.ProgressBar.Status.PERCENT
});

//------------

myProgress.setValue(500);

25%

Пример на счетчике:

var myProgress = new BX.UI.ProgressBar({ 
	maxValue: 2000,
	value: 500,
	statusType: BX.UI.ProgressBar.Status.COUNTER
});

//------------

myProgress.setValue(500);

500 из 2000

Обновление счетчика

Для обновления счетчика используется метод update. Он принимает текущее значение прогресса (value) и высчитывает прогресс. После этого он изменяет счетчик и сам прогресс-бар.

myProgress.update(500);

Дополнительный текст

Текст можно поставить "до" или "после" прогресс-бара.

textBefore {string} - устанавливает текст перед прогресс-баром;

textAfter {string} - устанавливает текст после прогресс-бара.

var myProgress = new BX.UI.ProgressBar({ 
	textBefore: "Выполняется удаление",
	textAfter: "А может и не выполняется"
});

//------------

myProgress.setTextBefore("Выполняется удаление");
myProgress.setTextAfter("А может и не выполняется");

Выполняется удаление

А может и не выполняется

В колонку

column {boolean} - показывать элементы прогресс-бара в столбик. (по умолчанию: false)

var myProgress = new BX.UI.ProgressBar({ 
	column: true
});

25%

Выполняется удаление