Halogenium 
A collection of loading spinners with React.js based on halogen. Now supports React.js 15.0+ (16.0+ too!) and Safari.

Browser Support
 |  |  |  |  |  |
---|
IE 10+ ✔ | Chrome 4.0+ ✔ | Firefox 16.0+ ✔ | Opera 15.0+ ✔ | Safari 4.0+ ✔ | Edge 12+ |
Demo & Examples
Live demo: kirilldanshin.github.io/halogenium
To build the examples locally, run:
npm install
gulp dev
Then open localhost:9999
in a browser.
Installation
The easiest way to use halogenium
is to install it from NPM and import it.
You can also use the standalone build by including dist/halogenium.js
in your page. If you use this, make sure you have already included React, and it is available as a global variable.
npm install styled-components halogenium --save
Usage
import React, { Component } from 'react';
import { PulseLoader } from 'halogenium';
export default class Example extends Component {
render() {
return (
<PulseLoader color="#26A65B" size="16px" margin="4px"/>
);
}
}
Loaders
- PulseLoader
- RotateLoader
- BeatLoader
- RiseLoader
- SyncLoader
- GridLoader
- ClipLoader
- FadeLoader
- ScaleLoader
- SquareLoader
- PacmanLoader
- SkewLoader
- RingLoader
- MoonLoader
- DotLoader
- BounceLoader