DEV Community

loading...
Cover image for React - create simple animated progress bar

React - create simple animated progress bar

diraskreact profile image Dirask-React Originally published at dirask.com ใƒป2 min read

Hello! ๐Ÿ‘‹ ๐Ÿ˜Š

Today I want to show you a simple animated progress bar that I recently madeย in React.

Before we start, I would highly recommend you to check out runnable example for the solution on our website:
React - create simple animated progress bar

Final effect of thisย post:
image

Below I present you my solution for a simple progress bar with some styling ๐Ÿ“Š๐ŸŽจ.

In this solution I use:

  • useState hook to store the progress bar's state,
  • content width measured in percents according to the container - that trick lets us display progress from 0% to 100% in an easy way,
  • some example buttons that trigger setProgress() method to demonstrate how the progress bar works (animation between switching has a nice effect).

Practical example:

import React from 'react';

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 : ''}
        </div>
      </div>
    );
};

const App = () => {
  const [progress, setProgress] = React.useState(25);
  return (
    <div>
      <ProgressBar progress={progress} />
      <br />
      <div>
        <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>
      </div>
    </div>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

You can run this example here

Let me know what you think in the comment section! ๐Ÿ˜Š๐Ÿ’ฌ


Write to us! โœ‰

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

Discussion (4)

pic
Editor guide
Collapse
link2twenty profile image
Andrew Bone

This is very nice, something cool you could add is the progressbar role from ARIA.

Something like this.

const ProgressBar = ({progress}) => {
  const state = `${progress}%`;
    return (
      <div role="progressbar" 
        aria-valuenow={progress}
        aria-valuemin="0"
        aria-valuemax="100"
        style={containerStyle}
      >
        <div style={{...contentStyle, width: state}}>
          {progress > 5 ? state : ''}
        </div>
      </div>
    );
};
Enter fullscreen mode Exit fullscreen mode

This little change means screen readers now know what's going on within the component.

Collapse
diraskreact profile image
Dirask-React Author

Will do! Thanks for the tips. ๐Ÿ˜Š๐Ÿ”ฅ

Collapse
thomasledoux1 profile image
Thomas Ledoux

Nice and simple!
I think it might be even better if you used the HTML element instead!
Then your code is semantically correct too :-)
developer.mozilla.org/en-US/docs/W...

Collapse
ngwanevic profile image
Code Junkie

Nice, nothing complicated straight to the point