Home > Uncategorized > Growing jQuery Progress Bars

Growing jQuery Progress Bars

We’ve chosen to go with jQuery UI as an interface framework and while the progress bars look great out of the box we wanted to add the effect of the progress growing to its value when the user visits the page to draw attention to it.

jQuery’s documentation for the UI components, including the progress bar, is straight forward.

Once you’ve included the proper javascript files and created the progress div a simple javascript command adds the appropriate classes and creates the progress bar:

<script type="text/javascript">
$(function() {
$("#progressbar").progressbar({
value: 37
});
});
</script>

but to add the growing animation effect we initially set the value to 0 then animate the width of the progress bar value div created by jQuery’s javascript:

<script type="text/javascript">
$(function() {
$("#progressbar").progressbar({
value: 0
});
$("#progressbar > .ui-progressbar-value").animate({
width: "37%"
}, 500);
});
</script>

where 500 is the time the animation should take in milliseconds.

This gives the desired effect of the progress bar growing to its value when the page loads rather than immediately rendering the final result.

Not earth-shattering, but a nice little trick.

About these ads
Categories: Uncategorized
  1. 20101103 at 10:37

    Thanks for providing the example. It was really helpful

  2. legycsapo
    20120820 at 10:21

    Hi there.
    This is exactly what I wanted to achieve.
    Thanks for the code.

    How old is it, but still insanely usefull ! :)

    • legycsapo
      20120820 at 10:24

      Just one thing I forgot:

      With the 0 value, didn’t worked for me.
      I had to add at least 1.

  3. henrique
    20121207 at 04:18

    i have a problem how do i create 2 bars on my page but with different backgrounds ?

    jQuery UI Progressbar – Animated

    .ui-progressbar .ui-progressbar-value { background-image: url(folhabarra.jpg); }

    .ui-redprogressbar .ui-redprogressbar-value { background-image: url(bmoney.gif); }

    $(function() {
    $(“#progressbar”).progressbar({
    value: 1
    });
    $(“#progressbar > .ui-progressbar-value”).animate({
    width: “87%”
    }, 1800);
    });

    $(function() {
    $(“#redprogressbar”).progressbar({
    value: 8
    });
    $(“#redprogressbar > .ui-redprogressbar-value”).animate({
    width: “27%”
    }, 1800);
    });

    • rgauss
      20121210 at 18:02

      Are you saying this isn’t working or are you indicating this is your solution?

  4. Jake
    20121218 at 12:47

    Excellent! Thank you!

  1. No trackbacks yet.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: