react-toolbox/spec/components/progress.js

import React from 'react';
import ProgressBar from '../../components/progress_bar';
import style from '../style.css';

const initialState = {
  progress: 0,
  buffer: 10,
};

class ProgressBarTest extends React.Component {
  state = initialState;

  componentWillMount() {
    this.simulateProgress();
  }

  simulateProgress() {
    setTimeout(() => {
      if (this.state.progress < 100) {
        this.increaseProgress();
        if (this.state.progress > this.state.buffer) this.increaseBuffer();
      } else {
        this.setState(initialState);
      }
      this.simulateProgress();
    }, (Math.random() * 1 + 1) * 1000);
  }

  increaseProgress() {
    this.setState({
      progress: Math.random() * 30 + this.state.progress,
    });
  }

  increaseBuffer() {
    this.setState({
      buffer: Math.random() * (100 - this.state.progress) + this.state.progress,
    });
  }

  render() {
    return (
      <section>
        <h5>Progress bars</h5>
        <p style={{ margin: '10px auto' }}>Determinate</p>
        <ProgressBar mode="determinate" value={this.state.progress} buffer={this.state.buffer} />
        <p style={{ margin: '10px auto' }}>Indeterminate...</p>
        <ProgressBar mode="indeterminate" />
        <p style={{ margin: '10px auto' }}>Circular</p>
        <ProgressBar type="circular" mode="indeterminate" />
        <p style={{ margin: '10px auto' }}>Circular with custom size</p>
        <ProgressBar className={style.customSizedProgress} type="circular" mode="indeterminate" theme={style} />
      </section>
    );
  }
}

export default ProgressBarTest;