Simple Javascript Progress Bar

Here’s a quick and obvious-in-hindsight progress bar that I created while working on a project:

<div id="progress" style="border: 1px solid black;">
  <div style="background-color:green; width:50%">&nbsp;</div>

Now just use Javascript to change the width of the inner div!

Of course there can be any number of variations on this theme. For example, a repeating background-image can give a nice effect.

Or how about a discrete bar instead with say, five stars? Just use five image tags, then if you have these image elements in the array ‘stars’:

progress = Math.round (progress/20); //progress was a percentage
for (i =0; i < progress; i++) stars[i].src = "filled_star.gif"; for (i = progress; i < 5; i++) stars[i].src = "empty_star.gif"; [/sourcecode]


~ by hellfeuer on April 8, 2008.

11 Responses to “Simple Javascript Progress Bar”

  1. Wow… Your variant looks better than what I came up here (…
    Ironically, we both posted this almost at the same time 🙂

  2. Heh.. thanks. They’re both pretty similar i think

  3. Hi ,
    The progress bar looks great.
    Can you please help me in changing the width value calling a javascript?I am unable to change its value


  4. I tried this but it doesn’t seem to call my function.



  5. Very elegant, thanks!

  6. Chetna,

    You need to give an id to the inner div (I chose “inner”)


    Then define a function:

    function setPercentage(id, percent)
    var div = document.getElementById(id); = percent + ‘%’;

    The percentage can then be set by calling:
    That sets it to 77 percent.

  7. Found this after attempting a progress bar with a table. Yours works much better.

  8. Nice little script. Just what I was looking for. Thanks.

    I solved the width question with a margin tag in the outer div. No need for javascript.

    “margin:10px 20% 0px;” gave me a progress bar taking up 60% of the width, with 10 pixels above and zero below (which was what my specific application required).

  9. Nice work. I was looking for this and I also tried with table but couldn’t get it. Thanks.

  10. I seriously love your site.. Great colors & theme. Did you make this site yourself?
    Please reply back as I’m planning to create my own personal website and want to find out where you got this from or what the theme is named. Kudos!

  11. Today, I went to the beachfront with my kids.
    I found a sea shell and gave it to my 4 year old daughter
    and said “You can hear the ocean if you put this to your ear.” She placed the shell to
    her ear and screamed. There was a hermit crab inside and it pinched her ear.
    She never wants to go back! LoL I know this is totally off topic but
    I had to tell someone!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: