# 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. ```js { 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. ```js { 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** ```js { block : 'spin', mods : { theme : 'islands', size : 'xs', visible : true } } ``` **s** ```js { block : 'spin', mods : { theme : 'islands', size : 's', visible : true } } ``` **m** ```js { block : 'spin', mods : { theme : 'islands', size : 'm', visible : true } } ``` **l** ```js { block : 'spin', mods : { theme : 'islands', size : 'l', visible : true } } ``` **xl** ```js { block : 'spin', mods : { theme : 'islands', size : 'xl', visible : true } } ```