CSS Progress Bars [+25 Examples]

Tuesday 21th, Feb, 2023 | # #

A progress bar is a graphical element used to indicate the completion of a task. It is commonly used in applications or web pages that require the user to wait while a task is being processed.

To create a pure CSS progress bar, follow these steps:

Step 1: HTML Markup

First, create the HTML markup for the progress bar. You can use the

tag and give it a class name.

<div class="progress-bar">
  <div class="progress"></div>
</div>

Step 2: CSS Styles

Next, add CSS styles to the progress bar. The width and height can be customized based on your design.

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
}

.progress {
  width: 50%;
  height: 100%;
  background-color: #4caf50;
}

In the above example, we set the progress bar's width to 100% and height to 20px. We also added a background color of #e0e0e0 to the progress bar.

The progress class is the element that shows the progress. We set its width to 50% to indicate that it is halfway complete. We also added a background color of #4caf50 to the progress bar.

Step 3: Add Animation

To make the progress bar more dynamic, we can add animation. In this example, we will use the CSS transition property to create a smooth animation.

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
}

.progress {
  width: 0%;
  height: 100%;
  background-color: #4caf50;
  transition: width 1s ease-in-out;
}


Close X

Best Vector Post