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.

{
    block : 'spin',
    mods : { theme : 'islands', size : 'm', visible : true }
}

theme modifier

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

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

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