Lightweight wrapper around Loaders.css
npm install react-loadersLightweight wrapper around Loaders.css.
```
npm install --save react-loaders loaders.css
Require the component.
`jsdefault
var Loader = require('react-loaders').Loader;
// also available as
function renderLoader() {
return
}
`
`js`
static propTypes = {
type: PropTypes.string,
active: PropTypes.bool,
color: PropTypes.string,
innerClassName: PropTypes.string, // applied to the same div as .loader-inner.${type}
// useful for advanced styling
// className & style are implied
};
#### Sizing
Note: in ~2.x we had a size prop declared, but it never did anything so for 3.0 it has been removed. Why you ask? Well due to the way these are built by loaders.css, they are hardcoded to use specific pixel widths so sizing these natively would require rewriting that whole project.
Pro tip: you can resize these by simply passing style={{transform: 'scale(0.5)'}}.
`scss~
$primary-color: $my-brand-color;
// How you import this will depend heavily on your build setup
// If using webpack though, refers to node_modules
// @import '~loaders.css/src/animations/line-scale.scss'
@import 'loaders.css/src/animations/line-scale.scss'
.loader-hidden {
display: none;
}
.loader-active {
display: block;
}
`
If @import`ing with Sass, make you use something like autoprefixer to add backwards compatibility.