Cislunar has 12 beautiful LOADING.IO's CSS loading spinners to choose from. Customize your website the way you want!


Loading.io's CSS Spinners

These CSS loading animations dedicated for speed, simplicity & dev-friendly. Read more about them here .

Use .cl-spinner-color-* class to add colors to the spinners.

<div class="lds-circle cl-spinner-color-4"><div></div></div>

<div class="lds-dual-ring cl-spinner-color-1"></div>

<div class="lds-facebook cl-spinner-color-4"><div></div><div></div><div></div></div>

<div class="lds-heart cl-spinner-color-1"><div></div></div>

<div class="lds-ring cl-spinner-color-4"><div></div><div></div><div></div><div></div></div>

<div class="lds-roller cl-spinner-color-1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<div class="lds-default cl-spinner-color-4"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<div class="lds-ellipsis cl-spinner-color-1"><div></div><div></div><div></div><div></div></div>

<div class="lds-grid cl-spinner-color-4"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<div class="lds-hourglass cl-spinner-color-1"></div>

<div class="lds-ripple cl-spinner-color-4"><div></div><div></div></div>

<div class="lds-spinner cl-spinner-color-1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>