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>
HTML{
block: 'spin',
mods: {
theme: 'islands',
size: 'm',
visible: true
}
}
BEMJSON[
{
block: 'spin',
mods: {
theme: 'islands',
size: 'm',
visible: true
}
}
]
deps
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>
HTML{
block: 'spin',
mods: {
theme: 'islands',
size: 'm',
visible: true
}
}
BEMJSON[
{
block: 'spin',
mods: {
theme: 'islands',
size: 'm',
visible: true
}
}
]
deps
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>
HTML{
block: 'spin',
mods: {
theme: 'islands',
size: 'xs',
visible: true
}
}
BEMJSON[
{
block: 'spin',
mods: {
theme: 'islands',
size: 'xs',
visible: true
}
}
]
deps
s
Open in a new window<span class="spin spin_theme_islands spin_size_s spin_visible"></span>
HTML{
block: 'spin',
mods: {
theme: 'islands',
size: 's',
visible: true
}
}
BEMJSON[
{
block: 'spin',
mods: {
theme: 'islands',
size: 's',
visible: true
}
}
]
deps
m
Open in a new window<span class="spin spin_theme_islands spin_size_m spin_visible"></span>
HTML{
block: 'spin',
mods: {
theme: 'islands',
size: 'm',
visible: true
}
}
BEMJSON[
{
block: 'spin',
mods: {
theme: 'islands',
size: 'm',
visible: true
}
}
]
deps
l
Open in a new window<span class="spin spin_theme_islands spin_size_l spin_visible"></span>
HTML{
block: 'spin',
mods: {
theme: 'islands',
size: 'l',
visible: true
}
}
BEMJSON[
{
block: 'spin',
mods: {
theme: 'islands',
size: 'l',
visible: true
}
}
]
deps
xl
Open in a new window<span class="spin spin_theme_islands spin_size_xl spin_visible"></span>
HTML{
block: 'spin',
mods: {
theme: 'islands',
size: 'xl',
visible: true
}
}
BEMJSON[
{
block: 'spin',
mods: {
theme: 'islands',
size: 'xl',
visible: true
}
}
]
deps