API
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 });