https://github.com/bondz/react-epic-spinners

Reusable react components for epic-spinners
https://github.com/bondz/react-epic-spinners

animations css-spinners epic-spinners javascript loading-animations loading-spinner react spinner

Last synced: 20 days ago
JSON representation

Reusable react components for epic-spinners

• Host: GitHub
• URL: https://github.com/bondz/react-epic-spinners
• Owner: bondz
• License: mit
• Created: 2018-01-19T12:34:26.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T01:57:19.000Z (almost 2 years ago)
• Last Synced: 2024-09-19T04:08:36.444Z (about 2 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: 335
• Watchers: 5
• Forks: 22
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

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.

![scope preview](https://storage.googleapis.com/bit-assets/epic_spinners.png)

## 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).