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 |

Authors

| | |:---------------------:| | Lucas Bassetti |

See also the list of contributors who participated in this project.

How to Contribute

Please check the contributing guide

License

MIT · Lucas Bassetti