Spinner

Default Spinner

<div class="spinner spin-linear">
	<div class="spinner-inner"></div>
	<div class="spinner-hole"></div>
</div>

Styles

Primary

<div class="spinner spinner-primary spin-linear">
	<div class="spinner-inner"></div>
	<div class="spinner-hole"></div>
</div>

Accent

<div class="spinner spinner-accent spin-linear">
	<div class="spinner-inner"></div>
	<div class="spinner-hole"></div>
</div>

Information

<div class="spinner spinner-info spin-linear">
	<div class="spinner-inner"></div>
	<div class="spinner-hole"></div>
</div>

Success

<div class="spinner spinner-success spin-linear">
	<div class="spinner-inner"></div>
	<div class="spinner-hole"></div>
</div>

Warning

<div class="spinner spinner-warning spin-linear">
	<div class="spinner-inner"></div>
	<div class="spinner-hole"></div>
</div>

Error

<div class="spinner spinner-error spin-linear">
	<div class="spinner-inner"></div>
	<div class="spinner-hole"></div>
</div>

Spinner style examples

Animations

Linear

<div class="spinner spin-linear">
	<div class="spinner-inner"></div>
	<div class="spinner-hole"></div>
</div>

Eased

<div class="spinner spin-eased">
	<div class="spinner-inner"></div>
	<div class="spinner-hole"></div>
</div>

Spinner animation examples