0.2.0 • Published 6 years ago

loading-css v0.2.0

Weekly downloads
5
License
MIT
Repository
github
Last release
6 years ago

loading.css

npm Build Status GitHub license

⌛️ Tiny loaders and spinners made with only css and one div See demo

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 <head>
<link rel="stylesheet"  href="/path/to/loading.css">

or

<link rel="stylesheet"  href="/path/to/loading.min.css">
  1. Add the loading class followed by the appropriate class name of for the spinner.

Example:

<div class="loading ldgRing"></div>

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