Popularity
4.0
Stable
Activity
0.0
Stable
379
8
43

Programming language: CSS
License: MIT License
Tags: UI Components     Loader     React-component    

react-loaders alternatives and similar libraries

Based on the "Loader" category.
Alternatively, view react-loaders alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-loaders or a related project?

Add another 'Loader' Library

README

React Loaders

Lightweight wrapper around Loaders.css.

Demo

Install

npm install --save react-loaders loaders.css

Usage

Require the component.

var Loader = require('react-loaders').Loader;
// also available as `default`

function renderLoader() {
  return <Loader type="line-scale" active />
}

Props

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)'}}.

CSS

Import any of the animations you want to use.

$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 @importing with Sass, make you use something like autoprefixer to add backwards compatibility.