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