react-progress-3
v3.0.1
Published
Fork of React progress 2 http://milworm.github.io/react-progress-2/
Downloads
22
Maintainers
Readme
YouTube style progress bar for ReactJS
Installation
NPM
npm install react-progress-3
JSPM
jspm install npm:react-progress-3
Usage
Include react-progress-3/main.css
to your project. With SystemJS CSS plugin you simply need to write this line:
import "react-progress-3/main.css!"
Include react-progress-3
and put it somewhere in the top-component, for example:
import React from "react";
import Progress from "react-progress-3";
var Layout = React.createClass({
render: function() {
return (
<div className="layout">
<Progress.Component/>
{/* other components go here*/}
</div>
);
}
});
Now, whenever you need to show an indicator, just call Progress#show
, for example:
loadFeed: function() {
Progress.show();
// do your ajax thing.
},
onLoadFeedCallback: function() {
Progress.hide();
// render feed.
}
Please note, that show
and hide
calls are stacked, so after n-consecutive show
calls, you need to do n hide
calls to hide an indicator.
Styling
.loader-60devs .loader-60devs-progress {
background: #ff6f00;
}
Examples
Authors and Contributors
Orignally Created in 2015 by Ruslan Prytula (@milworm). - forked by Moshe Kolodny