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>
HTML{
block: 'spin',
mods: {
theme: 'islands',
size: 'm',
visible: true
}
}
BEMJSON[
{
block: 'spin',
mods: {
theme: 'islands',
size: 'm',
visible: true
}
}
]
deps
Модификатор theme
Допустимое значение: 'islands'
.
Способ использования: BEMJSON
.
Отвечает за стилевое оформление блока.
Необходимо использовать с модификатором size.
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
Допустимые значения для темы 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>
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