9 Minimal CSS Loading Spinners

Category: CSS & CSS3 , Loading | February 14, 2019
Author:nai888
Views Total:2,124 views
Official Page:Go to website
Last Update:February 14, 2019
License:MIT

Preview:

9 Minimal CSS Loading Spinners

Description:

Yet another collection of 9 minimal loading spinners created using pure CSS/CSS3.

Loading spinners included:

  1. Circle
  2. Dual Circle
  3. Square
  4. Bowtie
  5. Bowtie (Flip)
  6. Signal
  7. Triple signal
  8. Ring
  9. Rings

See also:

How to use it:

Install & download the CSS Loading Spinners.

# Yarn
$ yarn add css-loading-spinners
# NPM
$ npm install css-loading-spinners --save

Import the CSS Loading Spinners into the document.

<link href="css-loading-spinners.css" rel="stylesheet">

Add loading spinners to the webpage.

<div class="cls-spinner">
  <div class="cls-circle cls-spin"></div>
</div>
<div class="cls-spinner">
  <div class="cls-dual-circle cls-spin"></div>
</div>
<div class="cls-spinner">
  <div class="cls-square cls-flip-flop"></div>
</div>
<div class="cls-spinner">
  <div class="cls-bowtie cls-spin"></div>
</div>
<div class="cls-spinner">
  <div class="cls-bowtie cls-flip-flop"></div>
</div>
<div class="cls-spinner">
  <div class="cls-signal"></div>
</div>
<div class="cls-spinner">
  <div class="cls-triple-signal"></div>
</div>
<div class="cls-spinner">
  <div class="cls-ring"></div>
</div>
<div class="cls-spinner">
  <div class="cls-rings"></div>
</div>

Override the default styles of the loading spinners.

:root {
  --cls-color: #558B6E;
  --cls-sec-color: #EEEEEE;
  --cls-size: 5rem;
  --cls-margin: 1rem;
  --cls-speed: 2s;
}

You Might Be Interested In:


Leave a Reply