progressbar
Use this block for displaying a progress status of a process.
Overview
Modifiers of the block
| Modifier |
Acceptable values |
Use cases |
Description |
| theme |
'islands' |
BEMJSON |
A custom design. |
Custom fields of the block
| Field |
Type |
Description |
| val |
Number |
The status of the process progress (in percent). |
Block description
Use the progressbar block to display the progress of some process. The fundamental difference from the spin block is that the progressbar shows a status of the process progress.
The block has the default width value: the progressbar width is equal to the width of the parental block.
Modifiers of the block
theme modifier
Acceptable value: 'islands'.
Use case: BEMJSON.
The modifier gives the block a custom design.
Open in a new window<div class="progressbar progressbar_theme_islands i-bem" data-bem='{"progressbar":{"val":25}}' role="progressbar" aria-valuenow="25%">
<div class="progressbar__bar" style="width:25%"></div>
</div>
{
block: 'progressbar',
mods: {
theme: 'islands'
},
val: 25
}
[
{
block: 'progressbar',
mods: {
theme: 'islands'
}
}
]
Custom fields of the block
val field
Type: Number.
Specifies the status of the process progress (in percent relative to its parental block). By default process progress is equal to 0;
Open in a new window<div class="progressbar progressbar_theme_islands i-bem" data-bem='{"progressbar":{"val":25}}' role="progressbar" aria-valuenow="25%">
<div class="progressbar__bar" style="width:25%"></div>
</div>
{
block: 'progressbar',
mods: {
theme: 'islands'
},
val: 25
}
[
{
block: 'progressbar',
mods: {
theme: 'islands'
}
}
]