Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/voltra/spinner-lord
A CSS bulk of animated spinners used for loading
https://github.com/voltra/spinner-lord
animated-spinners css css-library css3 loading-spinner
Last synced: about 8 hours ago
JSON representation
A CSS bulk of animated spinners used for loading
- Host: GitHub
- URL: https://github.com/voltra/spinner-lord
- Owner: Voltra
- License: mit
- Created: 2017-11-16T10:11:29.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-06T19:18:31.000Z (almost 7 years ago)
- Last Synced: 2024-10-31T08:17:41.970Z (16 days ago)
- Topics: animated-spinners, css, css-library, css3, loading-spinner
- Language: CSS
- Size: 13.7 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# spinner-lord
> A CSS bulk of animated spinners used for loading
# What is `spinner-lord` ?
`spinner-lord` is a CSS only library that provides multiple lightweight circular loading spinners.
It provides several ready-to-use spinners as well as the ability to create your own easily.
# Why should I care ? Do I even need a loading spinner ?
The web as evolve since its first premises, now many rely on web applications, single page applications, heavy websites and so on.
The common factor is that sometimes, it is not easy for you to provide every single resource needed in a correct amount of time, even for the very minimal requirements (the page itself, stylesheets, scripts, etc...).
One solution to this problem would be to use a loading icon, in our case a loading spinner. This should grant you enough time to load your precious resources in the background while keeping the user visually distracted.
# How do I get started ?
First things first, you need to download this library.
You can :
* Download the source files directly from [github](https://github.com/Voltra/spinner-lord)
* Download it using npm : `npm install --save spinner-lord`
Once downloaded, you'll find yourself with a `css` folder within which a `variants` folder is contained.
You'll need two (or three) thing(s) : the library's core file (`spinner-lord.css`), a reset sheet (don't panic, `reset.css` is here if you don't have one) and your eventual variant.
Once those two are ready, you can proceed to use them in your page :
```html
```
However, the above will only display the spinner and nothing else, you might want to remove it dynamically :
```
- add the "active" class dynamically upon start
- replace the "active" class by the "inactive" class once everything is fully loaded
- Once the transition finished, you can remove #spinner-lord from the DOM
```
If you use jQuery or a jQuery-like library, the `js/removeSpinnerLord.js` file provides a function to remove it from the DOM (as well as `js/removeSpinnerLord.esm.js` which is the es6 module version of the above).