Skip to content

Instantly share code, notes, and snippets.

@btc
Created February 15, 2015 12:33
Show Gist options
  • Save btc/5affcad267664836dfc0 to your computer and use it in GitHub Desktop.
Save btc/5affcad267664836dfc0 to your computer and use it in GitHub Desktop.
// Generated by CoffeeScript undefined
var React;
React = require('react/addons');
module.exports = React.createClass({
displayName: "SpinKit",
getDefaultProps: function() {
return {
cssRequire: false,
spinnerName: 'three-bounce',
fadeIn: false
};
},
propTypes: {
cssRequire: React.PropTypes.bool.isRequired,
spinnerName: React.PropTypes.string.isRequired,
fadeIn: React.PropTypes.bool.isRequired
},
render: function() {
var classes, cx;
cx = React.addons.classSet;
classes = cx({
spinner: true,
"fade-in": this.props.fadeIn
});
if (this.props.cssRequire && this.props.fadeIn) {
require('../css/fade-in.css');
}
switch (this.props.spinnerName) {
case "three-bounce":
if (this.props.cssRequire) {
require('../css/three-bounce.css');
}
return this.transferPropsTo(React.DOM.div({
"className": classes + " three-bounce"
}, React.DOM.div({
"className": "bounce1"
}), React.DOM.div({
"className": "bounce2"
}), React.DOM.div({
"className": "bounce3"
})));
case "double-bounce":
if (this.props.cssRequire) {
require('../css/double-bounce.css');
}
return this.transferPropsTo(React.DOM.div({
"className": classes + " double-bounce"
}, React.DOM.div({
"className": "double-bounce1"
}), React.DOM.div({
"className": "double-bounce2"
})));
case "rotating-plane":
if (this.props.cssRequire) {
require('../css/rotating-plane.css');
}
return this.transferPropsTo(React.DOM.div({
"className": classes + " rotating-plane"
}));
case "wave":
if (this.props.cssRequire) {
require('../css/wave.css');
}
return this.transferPropsTo(React.DOM.div({
"className": classes + " wave"
}, React.DOM.div({
"className": "rect1"
}), React.DOM.div({
"className": "rect2"
}), React.DOM.div({
"className": "rect3"
}), React.DOM.div({
"className": "rect4"
}), React.DOM.div({
"className": "rect5"
})));
case "wandering-cubes":
if (this.props.cssRequire) {
require('../css/wandering-cubes.css');
}
return this.transferPropsTo(React.DOM.div({
"className": classes + " wandering-cubes"
}, React.DOM.div({
"className": "cube1"
}), React.DOM.div({
"className": "cube2"
})));
case "pulse":
if (this.props.cssRequire) {
require('../css/pulse.css');
}
return this.transferPropsTo(React.DOM.div({
"className": classes + " pulse"
}));
case "chasing-dots":
if (this.props.cssRequire) {
require('../css/chasing-dots.css');
}
return this.transferPropsTo(React.DOM.div({
"className": classes + " chasing-dots"
}, React.DOM.div({
"className": "dot1"
}), React.DOM.div({
"className": "dot2"
})));
case "circle":
if (this.props.cssRequire) {
require('../css/circle.css');
}
return this.transferPropsTo(React.DOM.div({
"className": classes + " circle-wrapper"
}, React.DOM.div({
"className": "circle1 circle"
}), React.DOM.div({
"className": "circle2 circle"
}), React.DOM.div({
"className": "circle3 circle"
}), React.DOM.div({
"className": "circle4 circle"
}), React.DOM.div({
"className": "circle5 circle"
}), React.DOM.div({
"className": "circle6 circle"
}), React.DOM.div({
"className": "circle7 circle"
}), React.DOM.div({
"className": "circle8 circle"
}), React.DOM.div({
"className": "circle9 circle"
}), React.DOM.div({
"className": "circle10 circle"
}), React.DOM.div({
"className": "circle11 circle"
}), React.DOM.div({
"className": "circle12 circle"
})));
case "cube-grid":
if (this.props.cssRequire) {
require('../css/cube-grid.css');
}
return this.transferPropsTo(React.DOM.div({
"className": classes + " cube-grid"
}, React.DOM.div({
"className": "cube"
}), React.DOM.div({
"className": "cube"
}), React.DOM.div({
"className": "cube"
}), React.DOM.div({
"className": "cube"
}), React.DOM.div({
"className": "cube"
}), React.DOM.div({
"className": "cube"
}), React.DOM.div({
"className": "cube"
}), React.DOM.div({
"className": "cube"
}), React.DOM.div({
"className": "cube"
})));
case "wordpress":
if (this.props.cssRequire) {
require('../css/wordpress.css');
}
return this.transferPropsTo(React.DOM.div({
"className": classes + " wordpress"
}, React.DOM.span({
"className": "inner-circle"
})));
case "fading-circle":
if (this.props.cssRequire) {
require('../css/fading-circle.css');
}
return this.transferPropsTo(React.DOM.div({
"className": classes + " fading-circle"
}, React.DOM.div({
"className": "circle1 circle"
}), React.DOM.div({
"className": "circle2 circle"
}), React.DOM.div({
"className": "circle3 circle"
}), React.DOM.div({
"className": "circle4 circle"
}), React.DOM.div({
"className": "circle5 circle"
}), React.DOM.div({
"className": "circle6 circle"
}), React.DOM.div({
"className": "circle7 circle"
}), React.DOM.div({
"className": "circle8 circle"
}), React.DOM.div({
"className": "circle9 circle"
}), React.DOM.div({
"className": "circle10 circle"
}), React.DOM.div({
"className": "circle11 circle"
}), React.DOM.div({
"className": "circle12 circle"
})));
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment