Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/humanzstudioz/over-loaders
Animating loaders using only CSS
https://github.com/humanzstudioz/over-loaders
css loaders purecss scss spinners stylesheets
Last synced: about 2 months ago
JSON representation
Animating loaders using only CSS
- Host: GitHub
- URL: https://github.com/humanzstudioz/over-loaders
- Owner: humanzstudioz
- License: mit
- Created: 2017-11-04T07:12:47.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-06T16:58:29.000Z (about 7 years ago)
- Last Synced: 2024-11-01T01:27:28.175Z (2 months ago)
- Topics: css, loaders, purecss, scss, spinners, stylesheets
- Language: CSS
- Size: 408 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# over-loaders
Animating loaders using only CSS.This is an easy way to add an overlay spinner on a DOM's object using simple classes. Helpful for showing loading animations while doing some Ajax/Axios/Pub-Sub calls.
![over-loader example image (thin-spinner)](images/thin-spinner.gif?raw=true "ThinSpinner")
## Installation
- via npm
`npm install over-loaders --save-dev`## Usage
```html
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
In the above example `over-loaders` is a global library class, whereas `thin-spinner` class represents the type of the spinner/loader. For now there is only 1 spinner available. Lookin further for your suggestions.