Awesome
React CSS Loaders
<a href="https://travis-ci.org/LucasBassetti/react-css-loaders"><img src="https://travis-ci.org/LucasBassetti/react-css-loaders.svg?branch=master" alt="Travis CI" /></a> <a href="https://badge.fury.io/js/react-css-loaders"><img src="https://badge.fury.io/js/react-css-loaders.svg" alt="npm version">
A collection of pure CSS React loading components. Based on Luke Haas css-loaders project.
<a href="https://lucasbassetti.com.br/react-css-loaders/"> <img src="https://cloud.githubusercontent.com/assets/1014326/26028622/d4de8bbe-37fa-11e7-95c4-a58c2779f4a3.gif" width="600" /> </a>Contents
Getting Start
npm install react-css-loaders --save
Usage
import { BarLoader } from 'react-css-loaders';
...
<BarLoader />
...
Components
BarLoader
Usage
<BarLoader />
Properties
Name | Type | Default |
---|---|---|
color | PropTypes.string | #000 |
duration | PropTypes.number | 1 |
size | PropTypes.number | 11 |
BubbleLoader
Usage
<BubbleLoader />
Properties
Name | Type | Default |
---|---|---|
color | PropTypes.string | #000 |
duration | PropTypes.number | 1.8 |
size | PropTypes.number | 10 |
BubbleSpinLoader
Usage
<BubbleSpinLoader />
Properties
Name | Type | Default |
---|---|---|
color | PropTypes.string | #000 |
duration | PropTypes.number | 1.3 |
size | PropTypes.number | 20 |
CometSpinLoader
Usage
<CometSpinLoader />
Properties
Name | Type | Default |
---|---|---|
color | PropTypes.string | #000 |
duration | PropTypes.number | 1.7 |
size | PropTypes.number | 90 |
CylinderSpinLoader
Usage
<CylinderSpinLoader />
Properties
Name | Type | Default |
---|---|---|
color | PropTypes.string | #000 |
duration | PropTypes.number | 1.1 |
size | PropTypes.number | 25 |
ResizeSpinLoader
Usage
<ResizeSpinLoader />
Properties
Name | Type | Default |
---|---|---|
background | PropTypes.string | #000 |
color | PropTypes.string | #000 |
duration | PropTypes.number | 2 |
size | PropTypes.number | 11 |
RotateSpinLoader
Usage
<RotateSpinLoader />
Properties
Name | Type | Default |
---|---|---|
color | PropTypes.string | #000 |
duration | PropTypes.number | 1.1 |
size | PropTypes.number | 10 |
SpinLoader
Usage
<SpinLoader />
Properties
Name | Type | Default |
---|---|---|
background | PropTypes.string | #fff |
color | PropTypes.string | #000 |
duration | PropTypes.number | 1.4 |
size | PropTypes.number | 10 |
Authors
Lucas Bassetti |
See also the list of contributors who participated in this project.
How to Contribute
Please check the contributing guide
License
MIT · Lucas Bassetti