yuanyan / halogen Goto Github PK

View Code? Open in Web Editor NEW

1.6K 1.6K 150.0 1.55 MB

A collection of loading spinners with React.js

Home Page: https://yuanyan.github.io/halogen

License: MIT License

JavaScript 89.20% HTML 6.54% Less 4.25%

halogen's People

Contributors

Stargazers

Watchers

Forkers

shipotian metaware iced-tea terinjokes bobmeek sumeet95 carabina tajo julianocomg kyoyadmoon hyeong-jin eniuz yeemapl swoopcmi sheep902 huhongyan pkdevbox sebt qhhsy agamennon freewayspb hqxluoyang alexhawkins bdsabian dieface jornason itxd syynth shigemk2 jsdami adioslabs abhilashsajeev dpacmittal rahavlussato toqz yhsiang forever4313 darkrishabh cdax iaziz zhangpinguknow weavler iakovmarkov mofelee reite cloudo yplayypay wanghes steller ryrudnev jany3534 tslater89 ada12 transferhealth sterlingwes sgfswen somehow-yw esteban-rocha shivamdawer kirilldanshin yan5845hao nitology hu19891110 cuitymiko tanomsak hentrymartin smorev markserrano915 tianguanghui minokun ddxtanx b5710547221 wahello trendingtechnology idin-khayami adityaraval anorudes dsi-solutions pisaacs minhkhanb choznerol unfernandito lina aalcott14 zberkom mcd-50 monzo vincentctr travisdbates tomlee1993 sh00ks colinsanity nanasmile adesege sowlutions redq blrichards jaitd edmondatto tradably

halogen's Issues

Center loader

Is there a prop or CSS styling to follow to make the Loader appear in the center of the page?

Having some issues testing this component in PhantomJS. Whenever I include it in a component which is included in a test, running in Phantom, I am getting these errors with (I know...) little useful information.

SYNTAX_ERR: DOM Exception 12: An invalid or illegal string was specified.

I've tried all kinds of different ways, but even a file with just import { BeatLoader } from 'halogen'; produces the error.

Running PhantomJS 1.9.19 btw

Any ideas? Chrome doesn't seem to mind at all.

Uncaught Error: Cannot find module "./PulseLoader"

using webpack and react, installed your plugin (npm install halogen --save)
when i add the following line in my code:
var Loader = require('halogen/PulseLoader');
I get the error.

Shrinkwrap fail

react peerDependencies make npm shrinkwrap fail with this error

peer invalid: react@^0.14.8, required by [email protected]

RiseLoader throws DomException on iOS (5) Safari

Hi,

I just found a small CSS typo that crashes halogen on iOS Safari.
See the code below:

/**
 * @type {Object}
 */
var keyframesEven = {
    '0%': {
        transform: 'scale(1.1)'
    },
    '25': { // <----------------------- Percent sign missing (causes DOM exception)
        transform: 'translateY(-' + riseAmount + 'px)'
    },
    '50%': {
        transform: 'scale(0.4)'
    },
    '75%': {
        transform: 'translateY(' + riseAmount + 'px)'
    },
    '100%': {
        transform: 'translateY(0) scale(1.0)'
    }
};

/**
 * @type {Object}
 */
var keyframesOdd = {
    '0%': {
        transform: 'scale(0.4)'
    },
    '25': { // <----------------------- Percent sign missing (causes DOM exception)
        transform: 'translateY(' + riseAmount + 'px)'
    },
    '50%': {
        transform: 'scale(1.1)'
    },
    '75%': {
        transform: 'translateY(-' + riseAmount + 'px)'
    },
    '100%': {
        transform: 'translateY(0) scale(0.75)'
    }
};

Once I add the percent signs, the error is fixed.

Regards

cannot render on server side

when use ReactDOM.renderToString render on server side your component throw exception

Margin property seems not used for RingLoader

Just tried your cool spinner, especially the RingLoader one, but when I tried the "margin" props, it did nothing to it.

When I look into the RingLoader.js, I can't find it used anywhere. Am I missing something ?

Thank you !

require.extensions.hasOwnProperty is not a function

When run gulp dev

/Users/old_david/Desktop/halogen/node_modules/require-dir/index.js:93
            if (!require.extensions.hasOwnProperty(ext)) {
                                    ^

TypeError: require.extensions.hasOwnProperty is not a function
    at requireDir (/Users/old_david/Desktop/halogen/node_modules/require-dir/index.js:93:37)
    at Object.<anonymous> (/Users/old_david/Desktop/halogen/node_modules/gulp-git/index.js:2:18)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/old_david/Desktop/halogen/gulpfile.js:10:9)

Which is which???

Hi, it looks like you have done excellent work here but you don't say which animation is which, which leads to 10 minutes of trying to mark off the names versus the animations. You'll lose users because of this simple thing which is needlessly frustrating and easily fixable.

React 15.5.0 deprecation error

Warning: Loader: 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.

react-native support ?

amazing work!

can i use this in my react-native project?

Fallback text or component for unsupported browsers

i think it would be good to provide some way to specify what to show when animations are not supported, maybe as a new prop or some child passed to the component

prop:

var Loader = require('halogen/PulseLoader');
var Example = React.createClass({
    render: function() {
        var fallbackContent = 'Loading...' // or <span><b>Loading...</b></span>

        return (
            <Loader color="#26A65B" size="16px" margin="4px" fallbackContent={fallbackContent} />
        );
    }
});

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

the mechanism to determine whether this fallback content should be shown could be specified as a new prop.

var fallback = !Modernizr.cssanimations;

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

An updated repository

For anyone looking to use this package, I created a new module and migrated all the components from this package to the new one. You are welcome to check it out. I fixed a few issues (there are definitely more to fix) and added some new loading spinners. Please let me know if you find any issues.

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

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

Website is down

Webpack and others

I am not sure it's ok to distribute jsx files, webpack can't recongize it by default and I suppose we should not have to BabelScriptize node.js code. It would quickly escalate into super long and brittle builds.

Cannot read property 'bool' of undefined

React version: 16.6.3
prop-types version: 15.6.2

Uncaught TypeError: Cannot read property 'bool' of undefined
    at eval (VM66354 PulseLoader.js:37)
    at Object../node_modules/halogen/PulseLoader.js (VM65913 bundle.js:3810)
    at __webpack_require__ (VM65913 bundle.js:725)
    at fn (VM65913 bundle.js:102)
    at eval (VM66353 Loading.js:10)
    at Module../src/components/Loading/Loading.js (VM65913 bundle.js:5746)
    at __webpack_require__ (VM65913 bundle.js:725)
    at fn (VM65913 bundle.js:102)
    at eval (VM66348 Handler.js:11)
    at Module../src/containers/Extractors/Handler/Handler.js (VM65913 bundle.js:5919)

Not working on firefox version 36.0.1

Getting below error at >> extraSheet.insertRule(css, index);
SyntaxError: An invalid or illegal string was specified

Support for React v15

Can we get an updated 0.2.x version that adds a peer dependency on react v15? Thanks, love this package. ;-)

Remove the http://madscript.com/halogen reference from the repository description

The address no longer belongs to this project and I've got a spammy "install this extension" popup. It might be malicious.

Support for React 0.14

Since React 0.14 brings breaking changes support should be added. When using react 0.14 peer dependency error happens.

Support style attribute beside className

When using inline styles the loaders cannot be styles. They are missing a style property which they could easily mix into the rendered divs style beside the className.

npm package has jsx markup

In order to the be fully compatible to other users the published package must be a builded file without JSX markup.

The only change required to do this is update the package.json file

// package.json
//.......
"main": "dist/halogen.js",
//.......

Add react as peerDependency

Nice work. Perhaps since this is solely for react you might want to have the 'react' package as a peerDependency.

Potential improvement of the docs: ES6+ syntax and broken icon for browsers support.

insertRule() syntax error in IE11

Hey,

I'm getting this error in MSIE 11 / Win 8.1:

I'm not sure why, because it looks Ok.

Feature Request - IE8 + IE9 Fallback

Hey man,
What would be the possibility of adding an IE8 and IE9 fallback that simply displayed text like "...Loading"?

Release a new npm package

Hi, can you please update the npm package with the latest changes?

Halogen Loaders are not working with React 16.0.0

Since the release of React 16.0.0, Both PropTypes and createClass have been moved into separate packages.

I get the following stack trace when using the PulseLoader:

I have modified PulseLoader.js with the proposed changes and my file now looks like this:

'use strict';

var React = require('react');
var assign = require('domkit/appendVendorPrefix');
var insertKeyframesRule = require('domkit/insertKeyframesRule');
var PropTypes = require('prop-types');
var createReactClass = require('create-react-class');

/**
 * @type {Object}
 */
var keyframes = {
  '0%': {
    transform: 'scale(1)',
    opacity: 1
  },
  '45%': {
    transform: 'scale(0.1)',
    opacity: 0.7
  },
  '80%': {
    transform: 'scale(1)',
    opacity: 1
  }
};

/**
 * @type {String}
 */
var animationName = insertKeyframesRule(keyframes);

var Loader = createReactClass({
  displayName: 'Loader',

  /**
     * @type {Object}
     */
  propTypes: {
    loading: PropTypes.bool,
    color: PropTypes.string,
    size: PropTypes.string,
    margin: PropTypes.string
  },

  /**
     * @return {Object}
     */
  getDefaultProps: function getDefaultProps () {
    return {
      loading: true,
      color: '#ffffff',
      size: '15px',
      margin: '2px'
    };
  },

  /**
     * @return {Object}
     */
  getBallStyle: function getBallStyle () {
    return {
      backgroundColor: this.props.color,
      width: this.props.size,
      height: this.props.size,
      margin: this.props.margin,
      borderRadius: '100%',
      verticalAlign: this.props.verticalAlign
    };
  },

  /**
     * @param  {Number} i
     * @return {Object}
     */
  getAnimationStyle: function getAnimationStyle (i) {
    var animation = [
      animationName,
      '0.75s',
      i * 0.12 + 's',
      'infinite',
      'cubic-bezier(.2,.68,.18,1.08)'
    ].join(' ');
    var animationFillMode = 'both';

    return {
      animation: animation,
      animationFillMode: animationFillMode
    };
  },

  /**
     * @param  {Number} i
     * @return {Object}
     */
  getStyle: function getStyle (i) {
    return assign(this.getBallStyle(i), this.getAnimationStyle(i), {
      display: 'inline-block'
    });
  },

  /**
     * @param  {Boolean} loading
     * @return {ReactComponent || null}
     */
  renderLoader: function renderLoader (loading) {
    if (loading) {
      return React.createElement(
        'div',
        { id: this.props.id, className: this.props.className },
        React.createElement('div', { style: this.getStyle(1) }),
        React.createElement('div', { style: this.getStyle(2) }),
        React.createElement('div', { style: this.getStyle(3) })
      );
    }

    return null;
  },

  render: function render () {
    return this.renderLoader(this.props.loading);
  }
});

module.exports = Loader;

With these changes, the loader does successfully appear on the page.

Server pre-rendering support

I am using webpack and server pre-rendering. Halogen tries to access document and the server crashes:

/Users/aluxian/Projects/Fou/frontend/node_modules/halogen/node_modules/react-kit/getVendorPropertyName.js:3
var div = document.createElement('div');
          ^
ReferenceError: document is not defined
    at Object.<anonymous> (/Users/aluxian/Projects/Fou/frontend/node_modules/halogen/node_modules/react-kit/getVendorPropertyName.js:3:11)
    at Module._compile (module.js:430:26)
    at Object.Module._extensions..js (module.js:448:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/aluxian/Projects/Fou/frontend/node_modules/halogen/node_modules/react-kit/appendVendorPrefix.js:3:29)
    at Module._compile (module.js:430:26)
    at Object.Module._extensions..js (module.js:448:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/aluxian/Projects/Fou/frontend/node_modules/halogen/PulseLoader.js:2:14)
    at Module._compile (module.js:430:26)

I'd love to use it, but I can't.. is there a quick fix for this or would you have to take a deeper look and change how things work inside the components?