❤
npm
Sign UpSign In

loading-css

0.2.0 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i loading-css

Repository

github.com/welksonramos/loading.css

Homepage

welksonramos.github.io/loading.css/

Weekly Downloads

86

Version

0.2.0

License

MIT

Unpacked Size

20.5 kB

Total Files

16

Last publish

Collaborators

  • welksonramos
Try on RunKit
Report malware