siimple css v3.3.0 GitHub Examples Home
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.