CSSSPINNER

CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code

View on Github Tweet

Simple Spinner

Simple Spinner
<div class="spin"></div>
Simple Spinner primary
<div class="spin primary"></div>
Simple Spinner secondary
<div class="spin secondary"></div>
Simple Spinner info
<div class="spin info"></div>
Simple Spinner success
<div class="spin success"></div>
Simple Spinner danger
<div class="spin danger"></div>
Simple Spinner warning
<div class="spin warning"></div>
Simple Spinner light
<div class="spin light"></div>
Simple Spinner dark
<div class="spin dark"></div>


Spinner Grow

Spinner Grow
<div class="spin-grow"></div>
Spinner Grow primary
<div class="spin-grow primary"></div>
Spinner Grow secondary
<div class="spin-grow secondary"></div>
Spinner Grow info
<div class="spin-grow info"></div>
Spinner Grow success
<div class="spin-grow success"></div>
Spinner Grow danger
<div class="spin-grow danger"></div>
Spinner Grow warning
<div class="spin-grow warning"></div>
Spinner Grow light
<div class="spin-grow light"></div>
Spinner Grow dark
<div class="spin-grow dark"></div>


Spinner Round

Spinner Round
<div class="spin-round"></div>
Spinner Round primary
<div class="spin-round primary"></div>
Spinner Round secondary
<div class="spin-round secondary"></div>
Spinner Round info
<div class="spin-round info"></div>
Spinner Round success
<div class="spin-round success"></div>
Spinner Round danger
<div class="spin-round danger"></div>
Spinner Round warning
<div class="spin-round warning"></div>
Spinner Round light
<div class="spin-round light"></div>
Spinner Round dark
<div class="spin-round dark"></div>


Spinner Bubble

Spinner Bubble
<div class="spin-bubble"></div>
Spinner Bubble primary
<div class="spin-bubble primary"></div>
Spinner Bubble secondary
<div class="spin-bubble secondary"></div>
Spinner Bubble info
<div class="spin-bubble info"></div>
Spinner Bubble success
<div class="spin-bubble success"></div>
Spinner Bubble danger
<div class="spin-bubble danger"></div>
Spinner Bubble warning
<div class="spin-bubble warning"></div>
Spinner Bubble light
<div class="spin-bubble light"></div>
Spinner Bubble dark
<div class="spin-bubble dark"></div>


Spinner Skeleton

Spinner Skeleton
<div class="spin-skeleton"></div>
Spinner Skeleton primary
<div class="spin-skeleton primary"></div>
Spinner Skeleton secondary
<div class="spin-skeleton secondary"></div>
Spinner Skeleton info
<div class="spin-skeleton info"></div>
Spinner Skeleton success
<div class="spin-skeleton success"></div>
Spinner Skeleton danger
<div class="spin-skeleton danger"></div>
Spinner Skeleton warning
<div class="spin-skeleton warning"></div>
Spinner Skeleton light
<div class="spin-skeleton light"></div>
Spinner Skeleton dark
<div class="spin-skeleton dark"></div>

© Crafted with at Varun Sridharan