Progress

progress.less

Spinner

Regular (24px)
Small (16px)
Big (40px)
<span class="spinner spinning"><span></span></span>
<span class="spinner spinning small"><span></span></span>
<span class="spinner spinning big"><span></span></span>

Simple spinners made with just two <span> elements and CSS. Spinning animation is entirely made with CSS so you don't need to do any additional work to make them spin: just add .spinning class to spinner.

You will need to use JavaScript though, if you want to toggle spinning animation and/or display and hide spinner where you need them. Use .hidden class on .spinner when you need to hide the spinner.


Customizable options
// progress
@spinner-color: @primary-accent-color;
@spinner-base-color: fadeout(@gray-d2,80%);