1 | # React Spinners
|
2 |
|
3 | [![npm version](https://badge.fury.io/js/react-spinners.svg)][npm_url]
|
4 | [![circle ci](https://circleci.com/gh/davidhu2000/react-spinners.svg?style=shield)][ci_url]
|
5 | [![downloads](https://img.shields.io/npm/dt/react-spinners.svg)][npm_url]
|
6 | [![license](https://img.shields.io/npm/l/react-spinners.svg)][npm_url]
|
7 | [![Code Triagers Badge](https://www.codetriage.com/davidhu2000/react-spinners/badges/users.svg)](https://www.codetriage.com/davidhu2000/react-spinners)
|
8 |
|
9 | [![dependencies Status](https://david-dm.org/davidhu2000/react-spinners/status.svg)](https://david-dm.org/davidhu2000/react-spinners)
|
10 | [![devDependencies Status](https://david-dm.org/davidhu2000/react-spinners/dev-status.svg)](https://david-dm.org/davidhu2000/react-spinners?type=dev)
|
11 | [![peerDependencies Status](https://david-dm.org/davidhu2000/react-spinners/peer-status.svg)](https://david-dm.org/davidhu2000/react-spinners?type=peer)
|
12 |
|
13 | [npm_url]: https://www.npmjs.org/package/react-spinners
|
14 | [ci_url]: https://circleci.com/gh/davidhu2000/react-spinners
|
15 |
|
16 | A collection of loading spinners with React.js based on [Halogen](https://github.com/yuanyan/halogen).
|
17 |
|
18 | This package is bootstraped using [react-npm-boilerplate](https://github.com/juliancwirko/react-npm-boilerplate)
|
19 |
|
20 | ## Demo
|
21 |
|
22 | [Demo Page](https://www.react-spinners.com)
|
23 |
|
24 | ## Installation
|
25 |
|
26 | ```bash
|
27 | npm install react-spinners --save
|
28 | ```
|
29 |
|
30 | ## Usage
|
31 |
|
32 | Each loader has their own default properties. You can overwrite the defaults by passing props into the loaders.
|
33 |
|
34 | Each loader accepts a `loading` prop as a boolean. The loader will not render anything if `loading` is `false`. The `loading` prop defaults to `true`.
|
35 |
|
36 | **IMPORTANT**: This package uses [emotion](https://github.com/emotion-js/emotion). Remember to add the plugin to `.babelrc`, for example:
|
37 |
|
38 | ```
|
39 | {
|
40 | "presets": ["@babel/preset-react", "@babel/preset-env],
|
41 | "plugins": ["emotion"]
|
42 | }
|
43 | ```
|
44 |
|
45 | ### Examples
|
46 |
|
47 | ```js
|
48 | import React from 'react';
|
49 | import { css } from '@emotion/core';
|
50 | // First way to import
|
51 | import { ClipLoader } from 'react-spinners';
|
52 | // Another way to import
|
53 | import ClipLoader from 'react-spinners/ClipLoader';
|
54 |
|
55 | // Can be a string as well. Need to ensure each key-value pair ends with ;
|
56 | const override = css`
|
57 | display: block;
|
58 | margin: 0 auto;
|
59 | border-color: red;
|
60 | `;
|
61 |
|
62 | class AwesomeComponent extends React.Component {
|
63 | constructor(props) {
|
64 | super(props);
|
65 | this.state = {
|
66 | loading: true
|
67 | }
|
68 | }
|
69 | render() {
|
70 | return (
|
71 | <div className='sweet-loading'>
|
72 | <ClipLoader
|
73 | css={override}
|
74 | sizeUnit={"px"}
|
75 | size={150}
|
76 | color={'#123abc'}
|
77 | loading={this.state.loading}
|
78 | />
|
79 | </div>
|
80 | )
|
81 | }
|
82 | }
|
83 | ```
|
84 |
|
85 | ## Available Loaders, PropTypes, and Default Values
|
86 |
|
87 | Common default props for all loaders:
|
88 |
|
89 | ```js
|
90 | loading: true
|
91 | color: '#000000'
|
92 | css: {}
|
93 | ```
|
94 | Note:
|
95 | `css` works exactly like the `css` works with the emotion package.
|
96 | You can directly write your css in css syntax without the dirty camelCase css in jss syntax.
|
97 | We recommend you to use this awesome library in your project. It supports Server side rendering with HTTP2 Stream!
|
98 | More info about using `css` [here](https://emotion.sh/docs/introduction)
|
99 |
|
100 | For `size`, `height`, and `width` props, there are `sizeUnit`, `heightUnit`, and `widthUnit` prop that accepts `px`, `%`, or `em`. The default for the unit prop is `px`.
|
101 |
|
102 | Loader | size:int | height:int | width:int | radius:int | margin:str
|
103 | -----------------:|:--------:|:----------:|:---------:|:----------:|:---------:
|
104 | BarLoader | | `4` | `100` | |
|
105 | BeatLoader | `15` | | | | `2px`
|
106 | BounceLoader | `60` | | | |
|
107 | CircleLoader | `50` | | | |
|
108 | ClipLoader | `35` | | | |
|
109 | ClimbingBoxLoader | `15` | | | |
|
110 | DotLoader | `60` | | | | `2px`
|
111 | FadeLoader | | `15` | `5` | `2` | `2px`
|
112 | GridLoader | `15` | | | |
|
113 | HashLoader | `50` | | | | `2px`
|
114 | MoonLoader | `60` | | | | `2px`
|
115 | PacmanLoader | `25` | | | | `2px`
|
116 | PropagateLoader | `15` | | | |
|
117 | PulseLoader | `15` | | | | `2px`
|
118 | RingLoader | `60` | | | | `2px`
|
119 | RiseLoader | `15` | | | | `2px`
|
120 | RotateLoader | `15` | | | | `2px`
|
121 | ScaleLoader | | `35` | `4` | `2` | `2px`
|
122 | SyncLoader | `15` | | | | `2px`
|