API

• Connecting
• Use
• Size
• Color
• Background
• Progress bar format
• Additional text
• As a column

Connecting at PHP page

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

Use

Method getContainer() returns progress bar layout.

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

myProgress.getContainer()

Dimensions

size defines progress bar size.

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

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

myProgress.setSize(BX.UI.ProgressBar.Size.LARGE);

Possible values:

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

Color

color defines progress bar color.

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

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

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

Possible values:

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

Background

fill {boolean} adds a background. Background color depends on color modifier specified for the bar. Default value false.

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

Progress meter

Progress counter format can have any values {number}.

maxValue {number} - defines maximum progress bar value. (default value: 100)

value {number} - current progress bar value. (default value: 0)

statusType - defines how progress bar is displayed:

BX.UI.ProgressBar.Status.PERCENT //Default. Show progress in %.
BX.UI.ProgressBar.Status.COUNTER //Show progress by counter

Example in percentage:

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

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

myProgress.setValue(500);

Counter example:

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

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

myProgress.setValue(500);

Counter update

Use the method update to update the counter. It accepts the current progress value (value) and calculates the progress. Then it updates the counter and the progress bar.

myProgress.update(500);

Additional text

Text can be specified "before" or "after" progress bar.

textBefore {string} - sets text before progress bar.

textAfter {string} - sets text after progress bar

var myProgress = new BX.UI.ProgressBar({ 
    textBefore: "Deleting in progress",
    textAfter: "Deleting is pending"
});

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

myProgress.setTextBefore("Deleting in progress");
myProgress.setTextAfter("Deleting is pending");

As a column

column {boolean} - show progress bar elements as a column. (default value: false)

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