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)

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

Forem Open with the Forem app