Search
Find
Spinner
An animated and pure CSS loading indicator
Add
siimple-spinner class to create a loading indicator.
<div class="siimple-spinner siimple-spinner--primary"></div>
Colored spinner
You can set the spinner color adding a
siimple-spinner--[COLOR] class.
<div class="siimple-spinner siimple-spinner--success"></div> <div class="siimple-spinner siimple-spinner--warning"></div> <div class="siimple-spinner siimple-spinner--error"></div>
Legacy colors API for the spinner element are still supported but will be removed in a future major release.
<div class="siimple-spinner siimple-spinner--navy"></div> <div class="siimple-spinner siimple-spinner--green"></div> <div class="siimple-spinner siimple-spinner--teal"></div>
Sizing
You can change the spinner size adding a
siimple-spinner--small class to make the spinner more smaller, or siimple-spinner--large class to make the spinner more bigger.
<div class="siimple-spinner siimple-spinner--dark siimple-spinner--small"></div> <div class="siimple-spinner siimple-spinner--dark"></div> <div class="siimple-spinner siimple-spinner--dark siimple-spinner--large"></div>
Found a mistake or want to help improve this documentation?
Suggest changes.