halogenium

A collection of loading spinners with React.js based on halogen

Usage no npm install needed!

<script type="module">
  import halogenium from 'https://cdn.skypack.dev/halogenium';
</script>

README

Halogenium npm version

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

NPM

Browser Support

IE Chrome Firefox Opera Safari Edge
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