Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-10-08T18:06:28.000Z (over 4 years ago)
- Last Synced: 2024-05-04T10:00:51.337Z (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: 119
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Lists
- Awesome-CSS-Resources - csspin: - Modular, Customizable and Single HTML Element Code for Pure CSS Loader and Spinner. (Frameworks / Resources / C)
- awesome-loading-indicators - CSSPIN - CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code for Pure CSS Loader and Spinner. (CSS)
- awesome-css-only - Csspin - CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code for Pure CSS Loader and Spinner. (Uncategorized / Uncategorized)
- awesome-stars - csspin - Modular, Customizable and Single HTML Element Code for Pure CSS Loader and Spinner | webkul | 998 | (CSS)
- my-awesome-stars - webkul/csspin - CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code for Pure CSS Loader and Spinner (CSS)
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
```
[](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)