https://github.com/webkul/csspin

CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code for Pure CSS Loader and Spinner
https://github.com/webkul/csspin

css less library loader modular spinner

Last synced: 25 days ago
JSON representation

CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code for Pure CSS Loader and Spinner

• Host: GitHub
• URL: https://github.com/webkul/csspin
• Owner: webkul
• License: mit
• Created: 2016-11-18T09:47:39.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2019-10-08T18:06:28.000Z (about 5 years ago)
• Last Synced: 2024-09-30T17:40:53.775Z (about 1 month ago)
• Topics: css, less, library, loader, modular, spinner
• Language: CSS
• Homepage: https://webkul.github.io/csspin/
• Size: 40 KB
• Stars: 1,040
• Watchers: 40
• Forks: 116
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-loading-indicators - CSSPIN - CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code for Pure CSS Loader and Spinner. (CSS)
• Awesome-CSS-Resources - csspin: - Modular, Customizable and Single HTML Element Code for Pure CSS Loader and Spinner. (Frameworks / Resources / C)
• awesome-css-only - Csspin - CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code for Pure CSS Loader and Spinner. (Uncategorized / Uncategorized)

README

        
# CSSPIN

CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code.   

CSSPIN Library has a different set of interactive Pure CSS Loaders and Spinners which are built on the top of LESS Preprocessor. Individual Pure CSS Loader or Spinner can be easily customized and can be embedded with Single HTML Element in your next Dev Project.

## Demo

Check out [Spinners in Motion](https://webkul.github.io/csspin/)

## Project Using CSSPIN

[Opencart Point of Sale](http://oc-demo.webkul.com/pos/wkpos/)

## Installation

Install CSSPIN with **npm** or **Bower** Package Manager     

```

npm install csspin

```

```

bower install csspin

```

[![CSSPIN Video](http://webkul.com/blog/wp-content/uploads/2016/12/csspin-video.png)](https://youtu.be/18uY-YueJeI)

## Less File Structure 

```

./less/

  ... _globals.less   

  ... _round.less   

  ... csspin-xxxx.less   

  ... csspin.less   

```

## How Less Stucture Works?   

* Less files ```with _``` are partials and have actual magic  

* Less files ```without _``` only imports partials   

* Less files named ```csspin-xxxx.less``` imports ```_globals.less``` and respective ```_partial.less```   

* Less files named ```csspin-xxxx.less``` acts as an individual module and can be compiled to ```css/csspin-xxxx.css``` for individual use   

* Less file named ```csspin.less``` imports all the partials and is compiled to ```csspin.css```  

## CSS File Structure   

```

./css/    

  ... csspin-xxxx.css 

./csspin.css  

```

## How CSS Structure Works?   

* CSS File named ```csspin.css``` consists CSS of all the spinners

* CSS File named ```csspin-xxxx.css``` consists CSS of respective spinners

## Credits

Crafted with :heart: at [Webkul UXlab](http://design.webkul.com)