3 Animated Loading Spinners In Pure CSS – spinner.css

Yet another collection of 3 animated loading spinners written in pure CSS/CSS3. Easy to implement via plain HTML.

How to use it:

1. Download and load the spinner.css in the HTML document.

<link rel="stylesheet" href="./spinner.css" />

2. Create loading spinners with single DIV.

<div class="spinner-dual"></div>
<div class="spinner-fast"></div>
<div class="spinner-triple"></div>

3. You can also nest these DIVs to create your own spinner styles.

<div class="spinner">
  <div class="spinner">
    <div class="spinner"></div>
  </div>
</div>
<div class="spinner-dual">
  <div class="spinner-dual"></div>
</div>
<div class="spinner-fast">
  <div class="spinner-fast">
    <div class="spinner-fast">
      <div class="spinner-fast"></div>
    </div>
  </div>
</div>
<div class="spinner-triple">
  <div class="spinner-triple">
    <div class="spinner-triple"></div>
  </div>
</div>