Skip to content
Home » Create a Simple Progress Bar with HTML and CSS

Create a Simple Progress Bar with HTML and CSS

html css progress bar

Hello friends! Today, I am going to show you a super-easy way to create a cool-looking progress bar with just a bit of HTML and CSS. This progress bar will be perfect for showing the progress on tasks or projects, and you don’t need anything heavy in terms of libraries – just a few lines of code. Let’s break this down line by line so you can see exactly how it all works!

Step 1: HTML Structure

First, write the basic HTML. Here’s what it looks like:

<div class="wrapper">
  <div class="progress-bar">
    <span class="progress-bar-fill" style="width: 10%"></span>
  </div>
</div>
  • <div class="wrapper"> – This is the wrapper for the progress bar. This helps keep everything in place and provides us a place to do overall styling if we need it.
  • <div class="progress-bar"> – Within our wrapper, we have another div that we call progress-bar. In here, we will style the outer of the progress bar.
  • <span class="progress-bar-fill" style="width: 10%"></span> – Ah, finally, the most important span! It’s actually the inner filling of the progress bar, for which we fix the width to 10%. This is all about the progress, and may be changed dynamically, such as to 20%, 50%, etc., in order to display different stages of completion!

Step 2: CSS Styling

Now, let’s add some beauty with CSS! Here’s the CSS we’ll use:

.wrapper {
  width: 100%;
}
  • .wrapper { width: 100%; } – We define the width for the wrapper to 100% so that it spans its parent container fully.
.progress-bar {
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 9px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
  • .progress-bar – This class styles the outer shell of our progress bar:
  • width: 100%; — Ensures the progress bar spans across its container.
  • background-color: #e0e0e0; – Grey light color for the background representing the empty part of the bar.
  • border-radius: 9px; – Rounds off the edges slightly, making it fittingly smooth and modern.
  • box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); – Adds a subtle shadow effect inside the bar, giving it some relief.
.progress-bar-fill {
  display: block;
  height: 8px;
  background-color: blue;
  border-radius: 9px;
  transition: width 500ms ease-in-out;
}
  • .progress-bar-fill – Styles the filling (or inner part) of the progress bar:
  • display: block; – Allows span to act similar to a block-level element to fill up horizontally in the progress bar.
  • height: 8px; – Defines the height of the fill for the bar, so that it’s not too thick or too thin.
  • background-color: blue; – Gives it a bold blue color. You can change this to any color you like.
  • border-radius: 9px; – Rounds the edges on the filling to keep it flush with the outer bar.
  • transition: width 500ms ease-in-out; — Adds smooth animation to the fill-in, such that whenever we change its width, it gradually fills up over half a second (500ms) rather than instantly jumping to the new width.

And there you have it!

With just a few lines of code, we’ve got a functional and responsive progress bar. To see the different levels of progress, all we have to do is change the width of the class .progress-bar-fill. Extremely simple, looking great! 🌟

To see the progress bar live in action, check out this CodePen! You can play around with the width of the progress bar and watch it update in real-time. It’s a fun way to see how small changes can bring the progress bar to life. Enjoy experimenting!

See the Pen
HTML + CSS Simple Progress Bar by Ashar Mehmood (@am57ce)
on CodePen.