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.
-
react-content-loader
⚪ SVG-Powered component to easily create skeleton loadings. -
react-spinners
A collection of loading spinner components for react -
react-spinkit
A collection of loading indicators animated with CSS for React -
react-redux-loading-bar
Loading Bar (aka Progress Bar) for Redux and React -
react-loader-spinner
Collection sets of a spinners for async operations for ReactJS -
react-loader
React component that displays a spinner via spin.js until your component is loaded. -
react-progress-button
:cyclone: Simple react.js component for an inline progress indicator -
react-block-ui
Easy way to block the user from interacting with your UI. -
react-spinners-css
Amazing collection of React spinners components with pure css -
react-md-spinner
Material Design spinner components for React.js. -
react-progress-label
Progress component for React and React Native -
React Nested Loader
The easiest way to inject a loader into a deeply nested component
AWS Cloud-aware infrastructure-from-code toolbox [NEW]
Do you think we are missing an alternative of react-loaders or a related project?
README
React Loaders
Lightweight wrapper around Loaders.css.
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 @import
ing with Sass, make you use something like autoprefixer to add backwards compatibility.