Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

react-loaders-spinners

0.4.0 • Public • Published

React-Loaders-Spinners

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!

install

npm i react-loaders-spinners

Downloadsweekly downloads

166

version

0.4.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability