Use this block to indicate a progress of some process.
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. |
Use the spin
block to indicate the progress of some process (for example, web page downloading process).
Acceptable value: true
.
Use case: BEMJSON
, JS
.
The modifier activates and displays the spin.
{
block : 'spin',
mods : { theme : 'islands', size : 'm', visible : true }
}
Acceptable value: 'islands'
.
Use case: BEMJSON
.
The modifier gives the block a custom design.
The islands
theme requires the size modifier.
{
block : 'spin',
mods : { theme : 'islands', size : 'm', visible : true }
}
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
{
block : 'spin',
mods : { theme : 'islands', size : 'xs', visible : true }
}
s
{
block : 'spin',
mods : { theme : 'islands', size : 's', visible : true }
}
m
{
block : 'spin',
mods : { theme : 'islands', size : 'm', visible : true }
}
l
{
block : 'spin',
mods : { theme : 'islands', size : 'l', visible : true }
}
xl
{
block : 'spin',
mods : { theme : 'islands', size : 'xl', visible : true }
}