kirilldanshin / halogenium

A collection of loading spinners with React.js

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

halogenium's Issues

server side rendering is not supported

we don't have document
module.exports = document.createElement('div').style;

PacmanLoader is broken

PacmanLoader renders wrong with 5 pacman figures. It does not animate anyway.

getDefaultProps was defined on PulseLoader, a plain JavaScript class.

Got this warning when importing PulseLoader from halogenium

getDefaultProps was defined on PulseLoader, a plain JavaScript class. This is only supported for classes created using React.createClass. Use a static property to define defaultProps instead.

Module not found: Error: Can't resolve 'halogenium/ClipLoader'

I have run

npm install halogenium --save

Then in my code

import React, { Component, PropTypes } from 'react';
import Loader from 'halogenium/ClipLoader';

...
return (
      <div className={styles['checking-status-spinner']}>
        <Loader color={color} />
      </div>
)

I got this error message:

  Module not found: Error: Can't resolve 'halogenium/ClipLoader' 

Do you have any suggestion?

I am using webpack 2.3.3, react 15.5.2 and babel 6.5.2

RingLoader is broken

https://streamable.com/11jnv

Hey guys, the ring loader only has one ring when in the original halogen it had two.

Support for react v16

I got this error when I updated my react version

TypeError: Cannot read property 'bool' of undefined
./node_modules/halogen/BounceLoader.js
node_modules/halogen/BounceLoader.js:31
  28 |  * @type {Object}
  29 |  */
  30 | propTypes: {
> 31 |     loading: React.PropTypes.bool,
  32 |     color: React.PropTypes.string,
  33 |     size: React.PropTypes.string
  34 | },

Not working with react 17

% npm i halogenium
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0 || ^16.0" from [email protected]
npm ERR! node_modules/halogenium
npm ERR! halogenium@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/lindongwu/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/lindongwu/.npm/_logs/2021-08-22T11_59_31_944Z-debug.log

Warning: propTypes was defined as an instance property on RiseLoader.

It gives such warning "Warning: propTypes was defined as an instance property on RiseLoader. Use a static property to define propTypes instead."
Version - "halogenium": "^2.2.2"
React 16.0.0

DotLoader not display

Allow for specifying colors via CSS rather than via props

Right now the colors are done via props. In order to add a color via CSS I need to render the loader like:

<ScaleLoader className="halogenium-loader" />

And then add CSS like:

.halogenium-loader {
  div {
    background-color: blue !important;
  }
}

Ideally, I wouldn't have to override all child <div/> elements using the !important rule, instead something like this would be enough:

.halogenium-loader {
  color: blue;
}

Couple new errors from v2.0.0-rc1

Hey folks, I just tried the v2.0.0-rc1 and although it fixed the problems from halogen, it seems as though 2 new warnings are popping up.

warning.js:36 Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

warning.js:36 Warning: getDefaultProps was defined on DotLoader, a plain JavaScript class. This is only supported for classes created using React.createClass. Use a static property to define defaultProps instead.

I'm open to putting together a PR to fix these warnings.

Why is styled-components a peer dependency?

I understand why the React packages are peer dependencies, but why styled-components? It's listed as a dev dependency, but that seems wrong. Shouldn't it be a normal dependency?

Same for the React packages. How come they aren't regular dependencies?

1.1.1 Files outside of src

Hi!

I was just curious if there was a reason that the 1.1.1 files are outside of the src folder.

Many thanks for updating and maintaining the halogen repo! :)

how to add the labels (or) name to the loader

Warning: ClipLoader: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

Moonloader has size 0

This line https://github.com/kirillDanshin/halogenium/blob/master/src/MoonLoader.jsx#L65 is means that passing a size as a string doesn't work (which is the default value of the prop). I'm not sure if the propType should be changed to just a number, or alternatively to properly support string sizes.

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

An alternative package

Due to the lack of maintenance of the halogen repo, I migrated all the code to a new repo and added some more spinners, i didn't realize this repo existed. For anyone who is interested, come check out my version. I'll be actively maintaining it.

Demo: http://www.davidhu.io/react-spinners/

Github: https://github.com/davidhu2000/react-spinners

An error occurs when importing the library.

I cant use this library, always send an error

document is not defined

💀