Progress Bar Part 3

In our previous blog post, we updated our progress bar code to use React and create a reusable progress bar component. In this tutorial, we’ll take it a step further and show you how to add animations to our progress bar using CSS and React.

Adding Animations with CSS

First, let’s update our CSS to add animations to our progress bar. Open up your ProgressBar.css file and add the following code:

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #ddd;
  border-radius: 10px;
  position: relative;
}

.progress {
  height: 100%;
  background-color: #4CAF50;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  animation-name: progress-animation;
  animation-duration: 2s;
  animation-timing-function: ease-out;
}

@keyframes progress-animation {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

In this code, we’ve added a position: relative to the progress-bar element and a position: absolute to the progress element. This will allow us to position the progress element inside the progress-bar element and animate its width without affecting the layout of other elements.

We’ve also added a CSS animation to the progress element called progress-animation. The animation starts with a width of 0% and ends with a width of 100%. It lasts for 2s and has an easing effect.

Updating the Progress Bar Component

Now that we have our CSS animations set up, let’s update our ProgressBar component to use them. Open up ProgressBar.js and update the progress element to include a className of animate.

<div className="progress animate" style={{ width: `${progress}%` }}></div>

In addition to the progress class, we’ve added a new animate class to trigger the CSS animation.

Conclusion

By adding animations to our progress bar using CSS and React, we can create a more engaging user experience and draw attention to the progress. Of course, you can customize the design and animation of the progress bar to match your website’s style.