Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://bondz.github.io/react-epic-spinners/
Reusable react components for epic-spinners
https://bondz.github.io/react-epic-spinners/
animations css-spinners epic-spinners javascript loading-animations loading-spinner react spinner
Last synced: 3 months ago
JSON representation
Reusable react components for epic-spinners
- Host: GitHub
- URL: https://bondz.github.io/react-epic-spinners/
- Owner: bondz
- License: mit
- Created: 2018-01-19T12:34:26.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:57:19.000Z (over 1 year ago)
- Last Synced: 2024-03-13T15:34:51.807Z (4 months ago)
- Topics: animations, css-spinners, epic-spinners, javascript, loading-animations, loading-spinner, react, spinner
- Language: JavaScript
- Homepage: https://bondz.github.io/react-epic-spinners/
- Size: 1.09 MB
- Stars: 337
- Watchers: 5
- Forks: 22
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Lists
- awesome-ui-component-library - React Epic Spinners - epic-spinners.svg?label=&style=social)](https://github.com/bondz/react-epic-spinners) - Reusable react components for spinners (React / Special use case libraries)
- awesome-javascript - React Epic Spinners - Reusable react components for epic-spinners (React)
- awesome-ui-components - React Epic Spinners - epic-spinners.svg?label=&style=social)](https://github.com/bondz/react-epic-spinners) - Reusable react components for spinners (React / Special use case libraries)
README
# React Epic Spinners
This library is the React implementation of Vue [epic-spinners](http://epic-spinners.epicmax.co/) by [EpicMax](https://github.com/epicmaxco/epic-spinners)
[Epic Spinners with Bit](https://bitsrc.io/bondz/react-epic-spinners) - Disocver, play and install spinners.
## Installation
Using NPM
```bash
npm install react-epic-spinners
```
Or Yarn
```bash
yarn add react-epic-spinners
```
## Demo
An online demo is available [here](https://bondz.github.io/react-epic-spinners/)
## Usage
All components accept the following props
* `size` `[number]`: (optional) specifies how large the spinner should be rendered
* `color` `[string]`: (optional) defaults to `#fff`. Specifies the color of the spinner.
* `animationDelay` `[number]`: (optional) specifies the timing of the spinner animation. Lower numbers mean the animations restart faster.
* `className` `[string]`: (optional) add any additional class you want to the component
* `style` `[object]`: (optional) a react component style object to additionally style the component
### Examples
```jsx
import { AtomSpinner } from 'react-epic-spinners'
// In your render function or SFC return
```
## Components
> All components are named exports of the package.
```jsx
import { ... } from 'react-epic-spinners'
```
* [AtomSpinner](/src/components/AtomSpinner.js)
* [BreedingRhombusSpinner](/src/components/BreedingRhombusSpinner.js)
* [CirclesToRhombusesSpinner](/src/components/CirclesToRhombusesSpinner.js)
* [FingerprintSpinner](/src/components/FingerprintSpinner.js)
* [FlowerSpinner](/src/components/FlowerSpinner.js)
* [FulfillingBouncingCircleSpinner](/src/components/FulfillingBouncingCircleSpinner.js)
* [FulfillingSquareSpinner](/src/components/FulfillingSquareSpinner.js)
* [HalfCircleSpinner](/src/components/HalfCircleSpinner.js)
* [HollowDotsSpinner](/src/components/HollowDotsSpinner.js)
* [IntersectingCirclesSpinner](/src/components/IntersectingCirclesSpinner.js)
* [LoopingRhombusesSpinner](/src/components/LoopingRhombusesSpinner.js)
* [OrbitSpinner](/src/components/OrbitSpinner.js)
* [PixelSpinner](/src/components/PixelSpinner.js)
* [RadarSpinner](/src/components/RadarSpinner.js)
* [ScalingSquaresSpinner](/src/components/ScalingSquaresSpinner.js)
* [SelfBuildingSquareSpinner](/src/components/SelfBuildingSquareSpinner.js)
* [SemipolarSpinner](/src/components/SemipolarSpinner.js)
* [SpringSpinner](/src/components/SpringSpinner.js)
* [SwappingSquaresSpinner](/src/components/SwappingSquaresSpinner.js)
* [TrinityRingsSpinner](/src/components/TrinityRingsSpinner.js)
### Known Issues
Because of some bugs with `flexbox` on Firefox, the following components may not render properly
* ScalingSquaresSpinner
* SwappingSquaresSpinner
* TrinityRingsSpinner
If you know a fix for it, please send a PR :)
## License
[MIT](LICENSE).