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 }
}