3 Animated Loading Spinners In Pure CSS – spinner.css

Category: CSS & CSS3 , Loading | May 1, 2020
Author:fernandoleonid
Views Total:422 views
Official Page:Go to website
Last Update:May 1, 2020
License:MIT

Preview:

3 Animated Loading Spinners In Pure CSS – spinner.css

Description:

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>

You Might Be Interested In:


Leave a Reply