General

Connecting
Basic template
Dimensions
Colors
Background
Text
Other

Connecting at PHP page

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

Basic template

.ui-progressbar has the default property 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>

Element <div class="ui-progressbar-bar" style="width:70%;"></div> is responsible for progress bar. Attribute style in property width will define progress bar size. For convenience, it's recommended to write values in %.

Dimensions

LG

Modifier .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:70%;"></div>
    </div>
</div>

MD

Modifier .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:70%;"></div>
    </div>
</div>

Colors

Primary

Modifier .ui-progressbar-primary. Default color.

<!-- .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>

<!-- .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:70%;"></div>
    </div>
</div>

Success

Modifier .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:70%;"></div>
    </div>
</div>

Warning

Modifier .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:70%;"></div>
    </div>
</div>

Danger

Modifier .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:70%;"></div>
    </div>
</div>

Background

Modifier .ui-progressbar-bg adds a background. Background color depends on color modifier, specified for progress bar. For example, background is light green for .ui-progressbar.ui-progressbar-success as shown in the example below.

<!-- .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:70%;"></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:70%;"></div>
    </div>
</div>

Text

Text can be located in front or after progress bar. There are 2 containers with specific classes .ui-progressbar-text-before and .ui-progressbar-text-after accordingly.

Deleting in progress

594 of 80 042

<!-- .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">Deleting in progress</div>
    <div class="ui-progressbar-track">
        <div class="ui-progressbar-bar" style="width:70%;"></div>
    </div>
    <div class="ui-progressbar-text-after">594 of 80 042</div>
</div>

Other

To locate progress bar elements into a column, use the modifier .ui-progressbar-column.

Deleting in progress 594 of 80 042

Deleting in progress

594 of 80 042

<!-- .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">Deleting in progress</div>
    <div class="ui-progressbar-track">
        <div class="ui-progressbar-bar" style="width:70%;"></div>
    </div>
    <div class="ui-progressbar-text-after">594 of 80 042</div>
</div>

Also use color palettes. It will look as follows:

Deleting in progress

594 of 80 042

<!-- .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">Deleting in progress</div>
    <div class="ui-progressbar-track">
        <div class="ui-progressbar-bar" style="width:70%;"></div>
    </div>
    <div class="ui-progressbar-text-after">594 of 80 042</div>
</div>