block17.javascript

//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;