9 Minimal CSS Loading Spinners

Preview:

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:

• 10 Best Loading Spinner/Indicator JavaScript & CSS Libraries

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;
}