{"id":5158,"date":"2021-06-03T02:00:00","date_gmt":"2021-06-03T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/how-to-make-a-progress-bar-in-css\/"},"modified":"2025-06-10T10:52:43","modified_gmt":"2025-06-10T08:52:43","slug":"how-to-make-a-progress-bar-in-css","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/how-to-make-a-progress-bar-in-css\/","title":{"rendered":"How to make a progress bar in CSS"},"content":{"rendered":"\n

How can you make really cool CSS progress bars? What HTML do you need? And how do you use CSS and JavaScript to make it actually work?<\/p>\n\n\n\n

In this post I’ll tell you everything you need to know about progress bars. But in order to do that, first I need to take you on a little journey to Hollywood…<\/p>\n\n\n

Progress bars hit the big screen<\/h2>\n\n\n

Every once in a while, elements from our line of work show up in pop culture – and in 2008, the humble progress bar got a chance to star in a blockbuster Hollywood movie.<\/p>\n\n\n\n

In the excellent Iron Man<\/em>, genius inventor Tony Stark is kidnapped, trapped in a cave, and forced to build a missile for some nasty terrorists. But instead of doing this, our innovative hero builds a suit of armour loaded up with all kinds of weapons, and uses it to escape.<\/p>\n\n\n\n

There’s a really cool scene when he’s just about to break out of his cavey prison. He asks Yinsen – his cellmate and assistant – to load up the software for the suit.<\/p>\n\n\n\n

Stark:<\/strong> Initialise the sequence. Now!
\nYinsen:<\/strong> Tell me, tell me!
\nStark:<\/strong> Function 11. You should see a progress bar. Tell me when you see it.
\nYinsen:<\/strong> I have it!<\/p>\n\n\n\n

Here’s the scene:<\/p>\n\n\n\n

\nhttps:\/\/www.youtube.com\/watch?v=FHU49CD0TOs\n<\/div><\/figure>\n\n\n\n

I love this. Stark had been captured by ruthless terrorists, and secretly plotting his escape. There was no time to lose – a single wasted second could mean the difference between life and death. But he still<\/em> took the time to code up a visual progress bar for the suit’s initialisation sequence.<\/p>\n\n\n\n

This guy takes UX really<\/em> seriously!<\/p>\n\n\n\n

Now, if Stark can do that in a cave (with a box of scraps) – then you my friend, with the full power of CSS at your disposal, have no excuse!<\/p>\n\n\n\n

So let’s talk about a few ways you can create a progress bar in CSS.<\/p>\n\n\n

The quickest and easiest CSS progress bar<\/h2>\n\n\n

In its simplest form, a progress bar just needs two elements:<\/p>\n\n\n\n

    \n
  • One element to create a gap or space that will be filled (you might call it the ‘track’ or ‘container’)<\/li>\n\n\n\n
  • Another element to actually fill that space (the bar itself)<\/li>\n<\/ul>\n\n\n\n

    To be fair to Tony Stark, this simple option is the one he went for when stuck in the cave. It’s pretty easy to set up – in fact, lets’s replicate the one Stark made:<\/p>\n\n\n

    <div<\/span> class<\/span>=\"progress\"<\/span>><\/span> \n  <div<\/span> class<\/span>=\"progress__bar\"<\/span>><\/span><\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    So progress<\/code> is the container, and progress__bar<\/code> is the element that will fill it up and indicate progress. Now for the CSS:<\/p>\n\n\n
    .progress<\/span> {\n  margin<\/span>: 50px<\/span> auto;\n  padding<\/span>: 2px<\/span>;\n  width<\/span>: 100%<\/span>;\n  max-width<\/span>: 500px<\/span>;\n  border<\/span>: 3px<\/span> solid #05e35e<\/span>;\n  height<\/span>: 30px<\/span>;\n}\n\n.progress<\/span> .progress__bar<\/span> {\n  height<\/span>: 100%<\/span>;\n  width<\/span>: 0%<\/span>;\n  background-color<\/span>: #05e35e<\/span>;\n  animation<\/span>: fill-bar 3s<\/span> infinite;\n}\n\n@keyframes<\/span> fill-bar {\n  from<\/span> {width<\/span>: 0%<\/span>;}\n  to<\/span> {width<\/span>: 100%<\/span>;}\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Set whatever height and width you need for progress<\/code>, and give it a border. You’ll basically just end up with a rectangle. To replicate the bar in the movie, I’ve added 2px of padding, which creates a little gap between the progress bar itself and the area it’s filling up.<\/p>\n\n\n\n
    For progress__bar<\/code>, I’ve set the height to 100% and width to 0%. BUT… I’ve added an animation, which increases the width from 0 to 100%. I’ve set that animation to repeat every 3 seconds.<\/p>\n\n\n\n
    Here’s how it looks:<\/p>\n\n\n\n