Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davidhu2000/react-spinners
A collection of loading spinner components for react
https://github.com/davidhu2000/react-spinners
component loader loading loading-spinners progressbar react react-component react-spinners reactjs spinners
Last synced: about 1 month ago
JSON representation
A collection of loading spinner components for react
- Host: GitHub
- URL: https://github.com/davidhu2000/react-spinners
- Owner: davidhu2000
- License: mit
- Created: 2017-07-05T02:02:42.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2024-04-11T00:49:47.000Z (5 months ago)
- Last Synced: 2024-04-14T15:25:24.905Z (5 months ago)
- Topics: component, loader, loading, loading-spinners, progressbar, react, react-component, react-spinners, reactjs, spinners
- Language: TypeScript
- Homepage: https://www.davidhu.io/react-spinners
- Size: 10.1 MB
- Stars: 2,921
- Watchers: 16
- Forks: 252
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: CODEOWNERS
Awesome Lists containing this project
- awesome-react-components - react-spinners - A collection of loading spinner components for react. (UI Components / Loader)
- awesome-react - react-spinners - A collection of loading spinner components for react.  (UI Components / Loader)
- awesome-loading-indicators - React Spinners - A collection of loading spinner components for react. (TypeScript)
- awesome-react-components - react-spinners - A collection of loading spinner components for react. (UI Components / Loader)
- fucking-awesome-react-components - react-spinners - A collection of loading spinner components for react. (UI Components / Loader)
README
# React Spinners
[][npm_url]
[][npm_url]
[][npm_url]
[](https://coveralls.io/github/davidhu2000/react-spinners?branch=master)
[npm_url]: https://www.npmjs.org/package/react-spinners
A collection of loading spinners with React.js based on [Halogen](https://github.com/yuanyan/halogen).
This package is bootstraped using [react-npm-boilerplate](https://github.com/juliancwirko/react-npm-boilerplate)
## Demo
[Demo Page](https://www.davidhu.io/react-spinners)
[Storybook](https://www.davidhu.io/react-spinners/storybook/)
## Installation
With Yarn:
```bash
yarn add react-spinners
```
With npm:
```bash
npm install --save react-spinners
```
## Usage
Each loader has their own default properties. You can overwrite the defaults by passing props into the loaders.
Each loader accepts a `loading` prop as a boolean. The loader will render `null` if `loading` is `false`.
### Example
```tsx
import { useState, CSSProperties } from "react";
import ClipLoader from "react-spinners/ClipLoader";
const override: CSSProperties = {
display: "block",
margin: "0 auto",
borderColor: "red",
};
function App() {
let [loading, setLoading] = useState(true);
let [color, setColor] = useState("#ffffff");
return (
setLoading(!loading)}>Toggle Loader
setColor(input.target.value)} placeholder="Color of the loader" />
);
}
export default App;
```
Example using React Class
```tsx
import React from "react";
import ClipLoader from "react-spinners/ClipLoader";
const override: React.CSSProperties = {
display: "block",
margin: "0 auto",
borderColor: "red",
};
class AwesomeComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
};
}
render() {
return (
);
}
}
```
## Available Loaders, PropTypes, and Default Values
Common default props for all loaders:
```
loading: true;
color: "#000000";
cssOverride: {}
speedMultiplier: 1;
```
All valid HTML props such as `aria-*` and `data-*` props are fully supported.
### `color` prop
`color` prop accepts a color hash in the format of `#XXXXXX` or `#XXX`. It also accepts basic colors listed below:
> maroon, red, orange, yellow, olive, green, purple, white,
> fuchsia, lime, teal, aqua, blue, navy, black, gray, silver
### `cssOverride` prop
The `cssOverride` prop is an object of camelCase styles used to create inline styles on the loaders. Any html css property is valid here.
### `size`, `height`, `width`, and `radius` props
The input to these props can be _number_ or _string_.
- If value is number, the loader will default to css unit `px`.
- If value is string, the loader will verify the unit against valid css units.
- If unit is valid, return the original value
- If unit is invalid, output warning console log and default to `px`.
The table below has the default values for each loader.
| Loader | size | height | width | radius | margin |
| ----------------: | :--: | :----: | :---: | :----: | :----: |
| BarLoader | | `4` | `100` | |
| BeatLoader | `15` | | | | `2` |
| BounceLoader | `60` | | | |
| CircleLoader | `50` | | | |
| ClimbingBoxLoader | `15` | | | |
| ClipLoader | `35` | | | |
| ClockLoader | `50` | | | |
| DotLoader | `60` | | | | `2` |
| FadeLoader | | `15` | `5` | `2` | `2` |
| GridLoader | `15` | | | |
| HashLoader | `50` | | | | `2` |
| MoonLoader | `60` | | | | `2` |
| PacmanLoader | `25` | | | | `2` |
| PropagateLoader | `15` | | | |
| PuffLoader | `60` | | | |
| PulseLoader | `15` | | | | `2` |
| RingLoader | `60` | | | | `2` |
| RiseLoader | `15` | | | | `2` |
| RotateLoader | `15` | | | | `2` |
| ScaleLoader | | `35` | `4` | `2` | `2` |
| SyncLoader | `15` | | | | `2` |