spin
Use this block to indicate a progress of some process.
Overview
Modifiers of the block
| Modifier |
Acceptable values |
Use cases |
Description |
| visible |
true |
BEMJSON, JS |
Spin activation. |
| theme |
'islands' |
BEMJSON |
A custom design. |
| size |
'xs', 's', 'm', 'l', 'xl' |
BEMJSON |
The size of the block. Use sizes only for spin when the theme modifier is set to islands. |
Block description
Use the spin block to indicate the progress of some process (for example, web page downloading process).
Modifiers of the block
visible modifier
Acceptable value: true.
Use case: BEMJSON, JS.
The modifier activates and displays the spin.
Open in a new window<span class="spin spin_theme_islands spin_size_m spin_visible"></span>
{
block: 'spin',
mods: {
theme: 'islands',
size: 'm',
visible: true
}
}
[
{
block: 'spin',
mods: {
theme: 'islands',
size: 'm',
visible: true
}
}
]
theme modifier
Acceptable value: 'islands'.
Use case: BEMJSON.
The modifier gives the block a custom design.
The islands theme requires the size modifier.
Open in a new window<span class="spin spin_theme_islands spin_size_m spin_visible"></span>
{
block: 'spin',
mods: {
theme: 'islands',
size: 'm',
visible: true
}
}
[
{
block: 'spin',
mods: {
theme: 'islands',
size: 'm',
visible: true
}
}
]
size modifier
Acceptable values for the islands theme: 'xs', 's', 'm', 'l', 'xl'.
Use case: BEMJSON.
Use the size modifier only for blocks with the islands theme.
Sets the size value for the block.
xs
Open in a new window<span class="spin spin_theme_islands spin_size_xs spin_visible"></span>
{
block: 'spin',
mods: {
theme: 'islands',
size: 'xs',
visible: true
}
}
[
{
block: 'spin',
mods: {
theme: 'islands',
size: 'xs',
visible: true
}
}
]
s
Open in a new window<span class="spin spin_theme_islands spin_size_s spin_visible"></span>
{
block: 'spin',
mods: {
theme: 'islands',
size: 's',
visible: true
}
}
[
{
block: 'spin',
mods: {
theme: 'islands',
size: 's',
visible: true
}
}
]
m
Open in a new window<span class="spin spin_theme_islands spin_size_m spin_visible"></span>
{
block: 'spin',
mods: {
theme: 'islands',
size: 'm',
visible: true
}
}
[
{
block: 'spin',
mods: {
theme: 'islands',
size: 'm',
visible: true
}
}
]
l
Open in a new window<span class="spin spin_theme_islands spin_size_l spin_visible"></span>
{
block: 'spin',
mods: {
theme: 'islands',
size: 'l',
visible: true
}
}
[
{
block: 'spin',
mods: {
theme: 'islands',
size: 'l',
visible: true
}
}
]
xl
Open in a new window<span class="spin spin_theme_islands spin_size_xl spin_visible"></span>
{
block: 'spin',
mods: {
theme: 'islands',
size: 'xl',
visible: true
}
}
[
{
block: 'spin',
mods: {
theme: 'islands',
size: 'xl',
visible: true
}
}
]
