CSS Awesome Trick: How to Create a Progress Bar That Changes Color According to Progress

A progress bar is a common feature on web pages, but do you know how to create a progress bar that automatically adjusts color based on progress?

The effect is as follows:

• If the progress is between 80% and 100%, set the background color to green.
• If the progress is between 60% and 80%, set the background color to blue.
• If the progress is between 40% and 60%, set the background color to purple.
• If the progress is between 20% and 40%, set the background color to yellow.
• If the progress is between 0% and 20%, set the background color to red.

In this article, let’s explore this topic together.

Progress Bar

First, we need to create a progress bar. The <progress> tag is often used to create a progress bar.

But in the following example, we need to use CSS variables, and this tag is not suitable. So we use regular div tag and some CSS styles to create progress bars.

A progress bar contains two parts:

• container
• progression