JSFiddle - React, Tailwind, and code Playground

by herodrigues

HTML

<div id="root"></div>

CSS

.progressbar .progress {
    transition: width 400ms ease-in-out;
    height: 100%;
    border-radius: 20px;
    color: white;
    animation: progress 2s linear infinite;
    background: repeating-linear-gradient(
      125deg,
      #ffd866,
      #ffd866 10px,
      #fee080 10px,
      #fee080 20px
    );
}

.progressbar {
    background-color: #fff;
    border: 3px solid #282735;
    border-radius: 20px;
    height: 28px;
    margin: 40px 48px 0 48px;
    width: 100%;
}

@keyframes progress {
  0% {
    background-position: -70px 0px;
  }
  100% {
    background-position: 0 0;
  }
}

#root {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#App {
  width: 70%;
  height: 100%;
  margin: 10px;
}

Babel + JSX

const ProgressBar = ({ progress }) => ( 
  <div className="progressbar">
    <div className="progress" style={{ width: `${progress}%`}}>
    </div>
  </div>
)

class App extends React.Component {

  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
    this.state = { progress: 10 }
  }

  handleClick() {
    this.setState({ progress: Math.random() * 100 + 1 })
  }
  
  render() {
    return (
      <div id="App">
        <button type="button" onClick={this.handleClick}>
          Change Progress
        </button>
        <hr />
        <ProgressBar progress={this.state.progress} />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"))