React CSS Loaders

A collection of pure CSS React loading components. Based on Luke Haas css-loaders project.

Contents

• Getting Started
• Usage
• Components
  • BarLoader
  • BubbleLoader
  • BubbleSpinLoader
  • CometSpinLoader
  • CylinderSpinLoader
  • ResizeSpinLoader
  • RotateSpinLoader
  • SpinLoader
• How to Contribute

Getting Start

npm install react-css-loaders --save

Usage

  import { BarLoader } from 'react-css-loaders';
  ...
  <BarLoader />
  ...

Components

BarLoader

Usage

<BarLoader />

Properties

Name	Type	Default
color	PropTypes.string	#000
duration	PropTypes.number	1
size	PropTypes.number	11

BubbleLoader

Usage

<BubbleLoader />

Properties

Name	Type	Default
color	PropTypes.string	#000
duration	PropTypes.number	1.8
size	PropTypes.number	10

BubbleSpinLoader

Usage

<BubbleSpinLoader />

Properties

Name	Type	Default
color	PropTypes.string	#000
duration	PropTypes.number	1.3
size	PropTypes.number	20

CometSpinLoader

Usage

<CometSpinLoader />

Properties

Name	Type	Default
color	PropTypes.string	#000
duration	PropTypes.number	1.7
size	PropTypes.number	90

CylinderSpinLoader

Usage

<CylinderSpinLoader />

Properties

Name	Type	Default
color	PropTypes.string	#000
duration	PropTypes.number	1.1
size	PropTypes.number	25

ResizeSpinLoader

Usage

<ResizeSpinLoader />

Properties

Name	Type	Default
background	PropTypes.string	#000
color	PropTypes.string	#000
duration	PropTypes.number	2
size	PropTypes.number	11

RotateSpinLoader

Usage

<RotateSpinLoader />

Properties

Name	Type	Default
color	PropTypes.string	#000
duration	PropTypes.number	1.1
size	PropTypes.number	10

SpinLoader

Usage

<SpinLoader />

Properties

Name	Type	Default
background	PropTypes.string	#fff
color	PropTypes.string	#000
duration	PropTypes.number	1.4
size	PropTypes.number	10

How to Contribute

Please check the contributing guide

License

MIT · Lucas Bassetti