Author: | nai888 |
---|---|
Views Total: | 2,124 views |
Official Page: | Go to website |
Last Update: | February 14, 2019 |
License: | MIT |
Preview:

Description:
Yet another collection of 9 minimal loading spinners created using pure CSS/CSS3.
Loading spinners included:
- Circle
- Dual Circle
- Square
- Bowtie
- Bowtie (Flip)
- Signal
- Triple signal
- Ring
- 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; }