16+ Pure HTML / CSS Loading Spinners – Spinners.css

Preview:

Description:

This is another collection of 16+ single- or multi-element loading spinners built with pure HTML/CSS and animated by CSS3.

How to use it:

Load the ‘spinners.css’ and ‘spinnerAnimation.css’ files in the document’s head section.

<link rel="stylesheet" href="styles/spinners.css">
<link rel="stylesheet" href="styles/spinnerAnimations.css">

Create single element loading indicators as follows:

<div class="single1ball"></div>
<div class="spinningCircle"></div>
<div class="single3"></div>
<div class="single4"></div>
<div class="single5"></div>
<div class="single6"></div>
<div class="single7"></div>
<div class="single8"></div>

Create multi-element loading indicators as follows:

<div class="multiple1">
  <div class="ball1"></div>
  <div class="ball2"></div>
  <div class="ball3"></div>
</div>

<div class="mult2rect mult2rect1"></div>
<div class="mult2rect mult2rect2"></div>
<div class="mult2rect mult2rect3"></div>
<div class="mult2rect mult2rect4"></div>
<div class="mult2rect mult2rect5"></div>

<div class="mult3circle1"></div>
<div class="mult3circle2"></div>

<div class="mul4stripe mul4stripe1"></div>
<div class="mul4stripe mul4stripe2"></div>
<div class="mul4stripe mul4stripe3"></div>
<div class="mul4stripe mul4stripe4"></div>

<div class="mul5circle1"></div>
<div class="mul5circle2"></div>
<div class="mul5circle3"></div>

<div class="mul6_1"></div>
<div class="mul6_2"></div>

<div class="mul7circ m7c1"></div>
<div class="mul7circ m7c2"></div>
<div class="mul7circ m7c3"></div>
<div class="mul7circ m7c4"></div>
<div class="mul7circ m7c5"></div>
<div class="mul7circ m7c6"></div>
<div class="mul7circ m7c7"></div>
<div class="mul7circ m7c8"></div>
<div class="mul7circ m7c9"></div>
<div class="mul7circ m7c10"></div>
<div class="mul7circ m7c11"></div>
<div class="mul7circ m7c12"></div>

<div class="mul8circ1"></div>
<div class="mul8circ2"></div>