yuanyan/halogen

A collection of loading spinners with React.js

JavaScript

1,616

47 commits

updated Aug 28, 2025

See the code

README

Halogen npm version

Pair on this

A collection of loading spinners with React.js.

  • React 0.14+ Use halogen 0.2
  • React 0.12+ Use halogen 0.1

Demo & Examples

Live demo: yuanyan.github.io/halogen

To build the examples locally, run:

npm install
gulp dev

Then open localhost:9999 in a browser.

Installation

The easiest way to use halogen is to install it from NPM and include it in your own React build process (using Browserify, etc).

You can also use the standalone build by including dist/halogen.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 halogen --save

Usage

var Loader = require('halogen/PulseLoader');
var Example = React.createClass({
  render: function() {
    return (
      <Loader color="#26A65B" size="16px" margin="4px"/>
    );
  }
});

Loaders

  • PulseLoader
  • RotateLoader
  • BeatLoader
  • RiseLoader
  • SyncLoader
  • GridLoader
  • ClipLoader
  • FadeLoader
  • ScaleLoader
  • SquareLoader
  • PacmanLoader
  • SkewLoader
  • RingLoader
  • MoonLoader
  • DotLoader
  • BounceLoader

Browser Support

IEChromeFirefoxOperaSafari
IE 10+ ✔Chrome 4.0+ ✔Firefox 16.0+ ✔Opera 15.0+ ✔Safari 4.0+ ✔

yuanyan/halogen

A collection of loading spinners with React.js

JavaScript

1,616

47 commits

updated Aug 28, 2025

See the code

README

Halogen npm version

Pair on this

A collection of loading spinners with React.js.

  • React 0.14+ Use halogen 0.2
  • React 0.12+ Use halogen 0.1

Demo & Examples

Live demo: yuanyan.github.io/halogen

To build the examples locally, run:

npm install
gulp dev

Then open localhost:9999 in a browser.

Installation

The easiest way to use halogen is to install it from NPM and include it in your own React build process (using Browserify, etc).

You can also use the standalone build by including dist/halogen.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 halogen --save

Usage

var Loader = require('halogen/PulseLoader');
var Example = React.createClass({
  render: function() {
    return (
      <Loader color="#26A65B" size="16px" margin="4px"/>
    );
  }
});

Loaders

  • PulseLoader
  • RotateLoader
  • BeatLoader
  • RiseLoader
  • SyncLoader
  • GridLoader
  • ClipLoader
  • FadeLoader
  • ScaleLoader
  • SquareLoader
  • PacmanLoader
  • SkewLoader
  • RingLoader
  • MoonLoader
  • DotLoader
  • BounceLoader

Browser Support

IEChromeFirefoxOperaSafari
IE 10+ ✔Chrome 4.0+ ✔Firefox 16.0+ ✔Opera 15.0+ ✔Safari 4.0+ ✔

Project health

Overall

2.3/10

Maintained

0/10

Code review

2/10
OpenSSF Scorecard

Latest release

0.2.0 · Apr 2, 2016

Releases this year

0

Significant stargazers

Vojtech Miksu

606 followers · starred Apr 2015

Sylvester Keil

221 followers · starred Jun 2016

Howard Edwards

19 followers · starred Jul 2017

Francois Wouts

232 followers · starred Nov 2017