{"id":4016,"date":"2012-01-03T03:08:54","date_gmt":"2012-01-03T07:08:54","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=4016"},"modified":"2013-03-07T19:24:01","modified_gmt":"2013-03-07T23:24:01","slug":"cross-browser-html5-progress-bars-in-depth","status":"publish","type":"post","link":"http:\/\/www.useragentman.com\/blog\/2012\/01\/03\/cross-browser-html5-progress-bars-in-depth\/","title":{"rendered":"Cross Browser HTML5 Progress Bars In Depth"},"content":{"rendered":"
\n

Update (March 9, 2012):<\/h3>\n

I have updated this document to include styling information for Internet Explorer 10.<\/p>\n<\/div>\n

\"\"

Screenshots of HTML5 progress bars with different styles applied. Details given below.<\/p><\/div> As a web application developer, progress bars are great when you want to show the user that some action is happening,<\/strong> especially when it can take a long time. They can be animated<\/strong> (like the one in Gmail does when it shows the user how long it is going to take for it to load and initialize), or static<\/strong> (like some shopping cart applications have to show the user how many pages it will take to check out an order). I used to create progress bars using <div><\/code> tags, CSS and a litle bit of math<\/a>, but now I like to do it the HTML5 way using the <progress><\/code> tag. This article will discuss how this tag is rendered by default<\/strong> in all operating systems and browsers and how to style the progress<\/code> tag with CSS<\/strong>, even in browsers that don’t officially support the it. It will also discuss some interesting limitations of all the browser implementations<\/strong> amd show some interesting examples using advanced CSS3 techniques.<\/strong><\/p>\n

The HTML: Simple<\/h2>\n

The HTML for a Progress bar is dead simple:<\/p>\n

\n
\r\n<progress max=\"100\" value=\"60\">\r\n  <strong>Progress: 60% done.<\/strong>\r\n<\/progress>\r\n<\/pre>\n<\/blockquote>\n
\nProgress: 60% done.<\/strong><\/progress>\n<\/div>\n
Note that the HTML inside the <progress><\/code> tag is the fallback for browsers that do not support it.<\/strong>  That, unfortunately, includes all versions of IE and Safari so far, as well older versions of Firefox (5.x and lower) and Opera (10.x and lower).  Although the fallback is acceptable, we can go a step further and use Lea Verou’s<\/a> excellent <progress><\/code> tag polyfill<\/a><\/strong>, which adds pretty much full-support for all of these browsers except for Safari 5 and lower<\/strong> (so you should always put in the fallback HTML just to be on the safe side<\/strong><\/em>).  Let’s take a look at these screenshots to see what how <progress><\/code> looks across the browserverse:<\/p>\n\n\n\n\n\n\n\n\n\n\n
<\/th>\nWindows 7<\/th>\nWindows XP<\/th>\nMac OS X<\/th>\nUbuntu Linux<\/th>\n<\/thead>\n
Firefox<\/th>\n\"\"<\/td>\n\"\"<\/td>\n\"\"<\/td>\n\"\"<\/td>\n<\/tr>\n
Chrome<\/th>\n\"\"<\/td>\n\"\"<\/td>\n\"\"<\/td>\n\"\"<\/td>\n<\/tr>\n
IE7-9 (polyfill)<\/th>\n\"\"<\/td>\nN\/A<\/td>\n<\/tr>\n
IE10<\/th>\n\"\"<\/td>\nN\/A<\/td>\n<\/tr>\n
Safari 5.1+ (polyfill)<\/th>\n\"\"<\/td>\n\"\"<\/td>\n\"\"<\/td>\nN\/A<\/td>\n<\/tr>\n
Opera<\/th>\n\"\"<\/td>\n\"\"<\/td>\n\"\"<\/td>\n\"\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Note that:<\/p>\n