React - animated progress bar

6 points
Created by:

In this short article we would like to show how to create animated progress bar in React.

Animated progress bar in React.
Animated progress bar in React.

Quick solution:

// ONLINE-RUNNER:browser;

// import React from 'react';
// import ReactDOM from 'react-dom';

const containerStyle = {
  	border: '1px solid silver',
  	background: '#ededed'

const contentStyle = {
  	background: '#00cc00',
  	height: '24px',
  	textAlign: 'center',
  	lineHeight: '24px',
  	fontFamily: 'sans-serif',
  	transition: '0.3s'

const ProgressBar = ({progress}) => {
  	const state = `${progress}%`;
    return (
      <div style={containerStyle}>
        <div style={{...contentStyle, width: state}}>
          {progress > 5 ? state : ''}

const App = () => {
  const [progress, setProgress] = React.useState(25);
  return (
      <ProgressBar progress={progress} />
      <br />
        <button onClick={() => setProgress(0)}>0%</button>
        <button onClick={() => setProgress(5)}>5%</button>
        <button onClick={() => setProgress(15)}>15%</button>
        <button onClick={() => setProgress(50)}>50%</button>
        <button onClick={() => setProgress(75)}>75%</button>
        <button onClick={() => setProgress(100)}>100%</button>

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);


Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.


React - animated progress bar
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂