React Loaders Spinners

A component-based loaders/spinners React library, built with styled-components.

Demo - check out and play around with the examples here.

Why should you use this?

If you need highly customizable loader(s) or spinner(s) in your React project.

Getting started

yarn add react-loaders-spinners

or

npm i react-loaders-spinners

Note that react-loaders-spinners lists styled-components as a peerDependency, therefore it expects you to have styled-components already installed in your project.

import React from 'react';
import { BounceyLoader } from 'react-loaders-spinners';

const App = () => (
  <BounceyLoader />
)

Available Props/Defaults/Types

Standard Default Props For ALL Loaders

| prop | default | | ------------ | --------- | | pColor:str | #555 | | loading:bool | true *req |

Additional Available Props

| Loader/Spinner | height:int | width:int | sColor:str | spaceBetween:int | thickness:int | rows:int | lineHeight:int | | ---------------- | ---------- | --------- | ---------- | ---------------- | ------------- | -------- | -------------- | | PulseLoader | 100 | 100 | #f3f3f3 | | | | | | BounceyLoader | 20 | 20 | | 20 | | | | | SpinLoader | 50 | 50 | #f3f3f3 | | 10 | | | | BoxLoader | 100 | 100 | | | | | | | JamminLoader | | | | | 10 | | | | ContentLoader | | 200 *req | | | | 4 *req | 20 |

PLEASE NOTE: For ContentLoader width refers to the parent container's width (in px cannot be %). It will work without a width however the animation will be off slightly. It is the only loader where width does not refer to the actual loader's width. A use case would be:

  // ContentLoader example
  <div style={{ width: '500px' }}>
    <ContentLoader 
      width={500}
      rows={8}
      lineHeight={28}
    />
  </div>

  // props example
  <PulseLoader 
    width={200}
    height={200}
    pColor='dodgerblue' // can use hex or named color
    sColor='#FF711E' // can use hex or named color
  />

Contributing

I'd love to get some feedback and contribution from the community. Feel free to file an issue, create a pull request, or leave some feedback as to how you think this project can be improved! More loaders/spinners to be added soon!