Mozilla Hacks

The <progress> element

Avatar photo By louisremi

Posted on June 6, 2011 in Firefox, Firefox Aurora, and HTML

The <progress> element just landed in Firefox Aurora (to be Firefox 6).

As its name indicate, this element can be used to give visual clues of anything in progress on a Web page:

  • a set of ressources being downloaded,
  • a file being uploaded,
  • a computing Web Worker,
  • a WebGL scene being initialized…

Following is a simple demonstration of how the progress element can be used in conjunction with the FileReader API to create an ajax file uploader.

Don’t forget to click on result to see the code in action.

About louisremi

Developer Relations Team, long time jQuery contributor and Open Web enthusiast. @louis_remi

More articles by louisremi…

10 comments

  1. Paul Rouget

    In case you were wondering, “~~” in the JS code is an equivalent of “Math.floor()”.

    June 6th, 2011 at 09:52

    1. Vitaliy Kupets

      wow, that’s a neat use of tilde operator. Too bad it would confuse the most source code readers

      June 8th, 2011 at 05:52

  2. Chris

    Thanks for the ‘~~’ tip.
    But what is ‘$’? And do I need it to using progress element?
    Or is it requires to make the example compatible with IE6? But I guess IE6 does not have progress element in first place?

    June 6th, 2011 at 11:05

    1. louisremi

      The $ is the shorthand variable for jQuery: http://jquery.com
      It was used here to keep the code size short, not for cross-browser compatibility.

      June 6th, 2011 at 11:15

      1. gypsylady

        Would have to agree with to you some extent.
        Crossing the $ for JQuery is a good find.
        It will not be able to handle the compatibility.

        June 10th, 2011 at 22:49

  3. smaug

    Could you please rewrite the example to use the actual API,
    not use the API via jQuery.

    June 6th, 2011 at 11:26

    1. Paul Rouget

      done.

      June 7th, 2011 at 05:12

  4. kamathln

    That does it. Dont get confused If I use HAML(Hyper App Markup Language) and HTML interchangeably.

    June 9th, 2011 at 01:58

  5. simonleung

    “~~” in the JS code is an equivalent of “Math.floor() for Positive Number”

    June 9th, 2011 at 06:47

  6. gypsylady

    return false;

    Can give a false number and put it into a loop.

    fake XHR object simulating a slow upload

    One of the other problems possibly?

    progress.innerHTML = ~~(100 * e.loaded / e.total) + “%”

    window.location.href & xhr.send(file)

    Will be a down fall to the value………? Just my opinion only~
    Thanks~

    June 10th, 2011 at 23:01

Comments are closed for this article.