43 #spinner Spinner
Animated spinner loader component.
Examples
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci. Nunc et gravida ipsum, eu ultrices magna. Donec sit amet leo nec orci iaculis faucibus in quis sapien. Sed ut massa non libero interdum tempor vel at sapien. Quisque eros mi, cursus et cursus non, rutrum nec mauris. Etiam hendrerit ante nisl, at fermentum mauris blandit pharetra.
Loading
.spinner--big
Spinner in big size
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci. Nunc et gravida ipsum, eu ultrices magna. Donec sit amet leo nec orci iaculis faucibus in quis sapien. Sed ut massa non libero interdum tempor vel at sapien. Quisque eros mi, cursus et cursus non, rutrum nec mauris. Etiam hendrerit ante nisl, at fermentum mauris blandit pharetra.
Loading
.spinner--small
Spinner in small size
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci. Nunc et gravida ipsum, eu ultrices magna. Donec sit amet leo nec orci iaculis faucibus in quis sapien. Sed ut massa non libero interdum tempor vel at sapien. Quisque eros mi, cursus et cursus non, rutrum nec mauris. Etiam hendrerit ante nisl, at fermentum mauris blandit pharetra.
Loading
<div style="position: relative;">
<!-- This is a preloaded content part -->
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci. Nunc et gravida ipsum, eu ultrices magna. Donec sit amet leo nec orci iaculis faucibus in quis sapien. Sed ut massa non libero interdum tempor vel at sapien. Quisque eros mi, cursus et cursus non, rutrum nec mauris. Etiam hendrerit ante nisl, at fermentum mauris blandit pharetra.</div>
<div class="spinner__overlay active"></div>
<div class="spinner [modifier class] active">
<div class="spinner__image"></div>
<div class="spinner__text">Loading</div>
</div>
</div>
Examples
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci. Nunc et gravida ipsum, eu ultrices magna. Donec sit amet leo nec orci iaculis faucibus in quis sapien. Sed ut massa non libero interdum tempor vel at sapien. Quisque eros mi, cursus et cursus non, rutrum nec mauris. Etiam hendrerit ante nisl, at fermentum mauris blandit pharetra.
.spinner--big
Spinner in big size
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci. Nunc et gravida ipsum, eu ultrices magna. Donec sit amet leo nec orci iaculis faucibus in quis sapien. Sed ut massa non libero interdum tempor vel at sapien. Quisque eros mi, cursus et cursus non, rutrum nec mauris. Etiam hendrerit ante nisl, at fermentum mauris blandit pharetra.
.spinner--small
Spinner in small size
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci. Nunc et gravida ipsum, eu ultrices magna. Donec sit amet leo nec orci iaculis faucibus in quis sapien. Sed ut massa non libero interdum tempor vel at sapien. Quisque eros mi, cursus et cursus non, rutrum nec mauris. Etiam hendrerit ante nisl, at fermentum mauris blandit pharetra.
<div style="position: relative;">
<!-- This is a preloaded content part -->
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci. Nunc et gravida ipsum, eu ultrices magna. Donec sit amet leo nec orci iaculis faucibus in quis sapien. Sed ut massa non libero interdum tempor vel at sapien. Quisque eros mi, cursus et cursus non, rutrum nec mauris. Etiam hendrerit ante nisl, at fermentum mauris blandit pharetra.</div>
<div class="spinner__overlay active"></div>
<div class="spinner [modifier class] active">
<div class="spinner__image"></div>
</div>
</div>