https://github.com/welksonramos/loading.css
:hourglass_flowing_sand: Tiny loaders and spinners made with only css and one div
https://github.com/welksonramos/loading.css
animations css loaders spinners stylus
Last synced: 9 months ago
JSON representation
:hourglass_flowing_sand: Tiny loaders and spinners made with only css and one div
- Host: GitHub
- URL: https://github.com/welksonramos/loading.css
- Owner: welksonramos
- License: mit
- Created: 2018-07-27T17:21:48.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-02T08:24:41.000Z (about 3 years ago)
- Last Synced: 2025-04-21T07:30:42.948Z (9 months ago)
- Topics: animations, css, loaders, spinners, stylus
- Language: CSS
- Homepage: https://welksonramos.github.io/loading.css/
- Size: 3.16 MB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# loading.css
[](https://www.npmjs.com/package/loading-css) [](https://travis-ci.org/welksonramos/loading.css) [](https://packagephobia.now.sh/result?p=loading-css@0.2.0)
[](https://github.com/welksonramos/loading.css/blob/master/LICENSE)
> ⌛️ Tiny loaders and spinners made with only css and one div
[See demo](https://welksonramos.github.io/loading.css/)
## Install
### Fork this repo
```
$ git clone https://github.com/welksonramos/loading.css.git
```
### NPM
```
$ npm install loading-css --save
```
### Manually
Download `loading.css` or `loading.min.css` from this repo and add it to your HTML.
## Usage
1. Include the stylesheet on your document's ``
```html
```
or
```html
```
2. Add the `loading` class followed by the appropriate [class name](#loading-style-classes) of for the spinner.
Example:
```html
````
## Loading style classes
- `ldgBalls`
- `ldgBar`
- `ldgBattery`
- `ldgDualRing`
- `ldgFlip`
- `ldgHourglass`
- `ldgRing`
- `ldgSignal`
- `ldgSquare`
## File Structure
```
loading.css/
|-- docs // Examples
| |-- index.html
| |-- loading.css
| |-- loading.min.css
|
|-- src/ // Source Stylus files
| |-- _efects/
| | |-- _balls.styl
| | |-- _bar.styl
| | |-- ...
| |-- base.styl
| |-- loading.styl
|
|-- loading.css
|-- loading.min.css
|-- package.json
|-- ...
````
## Tasks
```
$ npm run build
$ npm run minify
$ npm run dev
```
# License
Licensed under the [MIT License](LICENSE)