Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/LucasBassetti/react-css-loaders
:o: A collection of pure CSS React loading components
https://github.com/LucasBassetti/react-css-loaders
loaders pure-css react
Last synced: 3 months ago
JSON representation
:o: A collection of pure CSS React loading components
- Host: GitHub
- URL: https://github.com/LucasBassetti/react-css-loaders
- Owner: LucasBassetti
- License: mit
- Created: 2017-05-13T17:52:14.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-01-21T04:28:32.000Z (almost 5 years ago)
- Last Synced: 2024-07-08T19:18:33.452Z (4 months ago)
- Topics: loaders, pure-css, react
- Language: JavaScript
- Homepage: https://lucasbassetti.com.br/react-css-loaders/
- Size: 2.13 MB
- Stars: 395
- Watchers: 8
- Forks: 31
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - react-css-loaders
README
# React CSS Loaders
A collection of pure CSS React loading components. Based on Luke Haas [css-loaders](https://github.com/lukehaas/css-loaders) project.
## Contents
- [Getting Started](#getting-started)
- [Usage](#usage)
- [Components](#components)
- [BarLoader](#barloader)
- [BubbleLoader](#bubbleloader)
- [BubbleSpinLoader](#bubblespinloader)
- [CometSpinLoader](#cometspinloader)
- [CylinderSpinLoader](#cylinderspinloader)
- [ResizeSpinLoader](#resizespinloader)
- [RotateSpinLoader](#rotatespinloader)
- [SpinLoader](#spinloader)
- [How to Contribute](#how-to-contribute)
## Getting Start
```bash
npm install react-css-loaders --save
```
## Usage
``` javascript
import { BarLoader } from 'react-css-loaders';
...
...
```
## Components
### BarLoader
##### Usage
``
##### Properties
| Name | Type | Default |
|---|---|---|
| `color` | `PropTypes.string` | `#000` |
| `duration` | `PropTypes.number` | `1` |
| `size` | `PropTypes.number` | `11` |
### BubbleLoader
##### Usage
``
##### Properties
| Name | Type | Default |
|---|---|---|
| `color` | `PropTypes.string` | `#000` |
| `duration` | `PropTypes.number` | `1.8` |
| `size` | `PropTypes.number` | `10` |
### BubbleSpinLoader
##### Usage
``
##### Properties
| Name | Type | Default |
|---|---|---|
| `color` | `PropTypes.string` | `#000` |
| `duration` | `PropTypes.number` | `1.3` |
| `size` | `PropTypes.number` | `20` |
### CometSpinLoader
##### Usage
``
##### Properties
| Name | Type | Default |
|---|---|---|
| `color` | `PropTypes.string` | `#000` |
| `duration` | `PropTypes.number` | `1.7` |
| `size` | `PropTypes.number` | `90` |
### CylinderSpinLoader
##### Usage
``
##### Properties
| Name | Type | Default |
|---|---|---|
| `color` | `PropTypes.string` | `#000` |
| `duration` | `PropTypes.number` | `1.1` |
| `size` | `PropTypes.number` | `25` |
### ResizeSpinLoader
##### Usage
``
##### Properties
| Name | Type | Default |
|---|---|---|
| `background` | `PropTypes.string` | `#000` |
| `color` | `PropTypes.string` | `#000` |
| `duration` | `PropTypes.number` | `2` |
| `size` | `PropTypes.number` | `11` |
### RotateSpinLoader
##### Usage
``
##### Properties
| Name | Type | Default |
|---|---|---|
| `color` | `PropTypes.string` | `#000` |
| `duration` | `PropTypes.number` | `1.1` |
| `size` | `PropTypes.number` | `10` |
### SpinLoader
##### Usage
``
##### Properties
| Name | Type | Default |
|---|---|---|
| `background` | `PropTypes.string` | `#fff` |
| `color` | `PropTypes.string` | `#000` |
| `duration` | `PropTypes.number` | `1.4` |
| `size` | `PropTypes.number` | `10` |
## Authors
| |
|:---------------------:|
| [Lucas Bassetti](https://github.com/LucasBassetti/) |
See also the list of [contributors](https://github.com/LucasBassetti/react-css-loaders/contributors) who participated in this project.
## How to Contribute
Please check the [contributing guide](https://github.com/LucasBassetti/react-css-loaders/blob/master/contributing.md)
## License
MIT · [Lucas Bassetti](http://lucasbassetti.com.br)
[](https://coveralls.io/github/LucasBassetti/react-css-loaders)