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()

Starting from module version UI 21.800 new methods have been introduced:

finish() - method completes the progress in advance.

isFinish() - method verifies the status.

renderTo(element) - method indicates the node for progress bar rendering.

destroy() - method destroys a progress bar instance.

Dimensions

size defines progressbar size. Can accept not only specific text values, but also an integer. Bar, track and radius height are calculated automatically.

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

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

myProgress.getContainer()



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





Custom colours

You can set your own custom colours using the option colorBar: "#f00" for the bar and colorTrack: "#ff0" for the track. You can also use methods setColorBar("#f00") and setColorTrack("#ff0") accordingly.


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




    

        

    
25%



Counter example:

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

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

myProgress.setValue(500);


    

        

    
500 of 2000



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


In column

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

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


    
25%
    

        

    
    
Deleting in progress