spin
Используется для индикации выполнения какого-либо процесса.
Обзор блока
Модификаторы блока
| Модификатор |
Допустимые значение |
Способ использования |
Описание |
| visible |
true |
BEMJSON, JS |
Активация индикатора. |
| theme |
'islands' |
BEMJSON |
Стилевое оформление. |
| size |
'xs', 's', 'm', 'l', 'xl' |
BEMJSON |
Размер индикатора. Используется только с модификатором theme в значении islands. |
Описание блока
Блок spin используется для создания индикатора выполнения какого-либо процесса.
Модификаторы блока
Модификатор visible
Допустимое значение: true.
Способ использования: BEMJSON, JS.
Делает индикатор видимым.
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
Допустимое значение: 'islands'.
Способ использования: BEMJSON.
Отвечает за стилевое оформление блока.
Необходимо использовать с модификатором size.
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
Допустимые значения для темы islands: 'xs', 's', 'm', 'l', 'xl'.
Способ использования: BEMJSON.
Задает размер блоку.
Необходимо использовать с модификатором theme в значении islands.
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
}
}
]
