Instantly share code, notes, and snippets.

Embed
What would you like to do?
//Preloader.js
// ...
class Preloader extends Component {
constructor(props) {
super(props);
this.state = {
startLoader: 0,
numberOfSpins: 360 * 5
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
this.setState({
startLoader: 1
});
}
render() {
return (
<div id="parent">
<div className="container">
<div id="preloader-holder">
<p id="preloader-text">
{' '}
Spin that loader! <button
onClick={this.handleClick}
className="btn btn-lg btn-primary"
>
Click
</button>
</p>
<div id="preloader-wrapper">
<Motion
defaultStyle={{ transform: 0 }}
style={{
transform: spring(
this.state.startLoader ? this.state.numberOfSpins : 0,
{ stiffness: 10, damping: 10 }
)
}}
>
{style => <Loader transform={style.transform} />}
</Motion>
</div>
</div>
</div>
</div>
);
}
}
export default Preloader;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment