{"id":16523,"date":"2013-02-25T21:01:36","date_gmt":"2013-02-25T13:01:36","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16523"},"modified":"2025-04-04T01:29:30","modified_gmt":"2025-04-03T17:29:30","slug":"html5-progress-bar","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/","title":{"rendered":"Creating &amp; Styling Progress Bar With HTML5"},"content":{"rendered":"<p><a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/html\/\">HTML5<\/a> brought us the progress bar element, making it easier to visually represent the completion status of tasks like uploads or downloads.<\/p>\n<p>This guide will show you how to insert this element into your webpage, customize its appearance with CSS, and animate the progress meter for a dynamic user experience.<\/p>\n<p>Let\u2019s dive in.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/beautiful-progress-bars\/\" class=\"ref-block__link\" title=\"Read More: 30 Beautiful Progress Bar Designs, Vol. 1\" rel=\"bookmark\"><span class=\"screen-reader-text\">30 Beautiful Progress Bar Designs, Vol. 1<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/beautiful-progress-bars.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-14730 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/beautiful-progress-bars.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">30 Beautiful Progress Bar Designs, Vol. 1<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAs Internet broadband connections get faster, our internal waiting clocks run on shorter and shorter minutes. But there...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Understanding the Basics<\/h2>\n<p>Integrating a progress bar is straightforward using the <code>&lt;progress&gt;<\/code> tag. The completion percentage is controlled by the <code>value<\/code>, alongside the <code>min<\/code> and <code>max<\/code> attributes to set the range, as shown below.<\/p>\n<pre>\r\n&lt;progress value=\"10\" max=\"100\"&gt;&lt;\/progress&gt;\r\n<\/pre>\n<p>This native progress bar\u2019s appearance may vary across different platforms. Here\u2019s an example of how it might look on Windows and OSX.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-progress-bar\/native-progress-bar.jpg\" alt=\"Example of a native progress bar on Windows and OSX\" width=\"134\" height=\"82\"><\/figure>\n<p>Next, we\u2019ll explore how to style this progress bar to achieve a uniform appearance regardless of the user\u2019s platform.<\/p>\n<h2>Customizing the Progress Bar\u2019s Look<\/h2>\n<p>In our CSS, targeting the <code>&lt;progress&gt;<\/code> element directly allows us to apply specific styles. For instance, we can change its background color, eliminate the default border, and give it rounded edges by setting a border radius equal to half of its height.<\/p>\n<pre>\r\nprogress {\r\n    background-color: #f3f3f3;\r\n    border: 0;\r\n    height: 18px;\r\n    border-radius: 9px;\r\n}\r\n<\/pre>\n<p>Different browsers, however, may interpret these styles in varying ways.<\/p>\n<p>In <strong>Firefox<\/strong>, these custom styles alter the outer bar, but not the inner progress indicator itself.<\/p>\n<p>For <strong>Chrome<\/strong> and <strong>Safari<\/strong>, the default browser or platform styling is overridden by the Webkit stylesheet. As a result, the modifications we\u2019ve made might not be applied as intended.<\/p>\n<p>This necessitates additional steps for compatibility.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-progress-bar\/progress-styles.jpg\" alt=\"Different progress bar styles across browsers\" width=\"358\" height=\"227\"><\/figure>\n<p>In <strong>Chrome<\/strong> and <strong>Safari<\/strong>, the <code>&lt;progress&gt;<\/code> element is broken down into parts.<\/p>\n<pre>\r\n&lt;progress&gt;\r\n    \u2517 &lt;div&gt; ::-webkit-progress-bar\r\n    \u2517 &lt;div&gt;::-webkit-progress-value\r\n<\/pre>\n<p>To style both the bar and its progress indicator in these browsers, we introduce Webkit-specific <code>pseudo-classes<\/code>.<\/p>\n<pre>\r\nprogress::-webkit-progress-bar {\r\n    \/* style rules *\/\r\n}\r\nprogress::-webkit-progress-value {\r\n    \/* style rules *\/\r\n}\r\n<\/pre>\n<p><strong>Firefox<\/strong> employs its unique pseudo-class, ::-moz-progress-bar, to style the progress indicator.<\/p>\n<pre>\r\nprogress::-moz-progress-bar {\r\n    \/* style rules *\/\r\n}\r\n<\/pre>\n<p>Here are the comprehensive selectors to style the HTML5 progress bar for broader browser compatibility.<\/p>\n<pre>\r\nprogress {\r\n    \/* style rules *\/\r\n}\r\nprogress::-webkit-progress-bar {\r\n    \/* style rules *\/\r\n}\r\nprogress::-webkit-progress-value {\r\n    \/* style rules *\/\r\n}\r\nprogress::-moz-progress-bar {\r\n    \/* style rules *\/\r\n}\r\n\r\n<\/pre>\n<h2>Animating the Progress Bar<\/h2>\n<p>Now, let\u2019s look at how to breathe life into our progress bar. Usually, a progress bar fills up from left to right as the operation advances.<\/p>\n<p>We\u2019ll set up the bar so it starts empty and fills up until it hits its maximum limit. As it fills, we\u2019ll display the progressing percentage alongside. Here\u2019s the basic structure we\u2019ll use.<\/p>\n<p><strong>HTML<\/strong><\/p>\n<pre>\r\n&lt;progress id=\"progressbar\" value=\"0\" max=\"100\"&gt;&lt;\/progress&gt;\r\n<\/pre>\n<p><strong>CSS<\/strong><\/p>\n<p>For this example, we\u2019ll rely on jQuery to animate our progress bar, so remember to include the jQuery script as follows.<\/p>\n<pre>\r\n&lt;script src=\"js\/jquery.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>Next, we prepare a script to animate the bar. We start by setting up variables for the progress bar itself, its maximum value, its current value, and the animation\u2019s timing.<\/p>\n<pre>\r\nvar progressbar = $('#progressbar'),\r\nmax = progressbar.attr('max'),\r\nvalue = progressbar.val(),\r\ntime = (1000\/max)*5;\r\n<\/pre>\n<p>Then, we define a variable called <code>loading<\/code> to house our animation function.<\/p>\n<pre>\r\nvar loading = function() {\r\n\r\n}\r\n<\/pre>\n<p>Within this function, we increment the value gradually. The speed of incrementation \u2013 and thus the speed of the animation \u2013 can be adjusted by changing the increment size.<\/p>\n<pre>\r\nvalue += 1;\r\n<\/pre>\n<p>After each increment, we update the progress bar with the new value.<\/p>\n<pre>\r\naddValue = progressbar.val(value);\r\n<\/pre>\n<p>We also display the current percentage alongside the progress bar for visual feedback.<\/p>\n<pre>\r\n$('.progress-value').html(value + '%');\r\n<\/pre>\n<p>To set the animation in motion, we periodically call the <code>loading<\/code> function using <code>setInterval<\/code>.<\/p>\n<pre>\r\nsetInterval(function() {\r\n    loading();\r\n}, time);\r\n<\/pre>\n<p>However, without intervention, this process would continue indefinitely. To prevent this, we incorporate a check within our animation function to halt the animation once the maximum value is reached.<\/p>\n<pre>\r\nvar animate = setInterval(function() {\r\n    loading();\r\n}, time);\r\n<\/pre>\n<p>And within the <code>loading<\/code> function, we add:<\/p>\n<pre>\r\nif (value == max) {\r\nclearInterval(animate);\r\n}\r\n<\/pre>\n<p>This addition ensures the animation stops once the progress bar is full.<\/p>\n<p>Below are the complete scripts necessary to animate the progress bar dynamically.<\/p>\n<pre>\r\n$(document).ready(function() {\r\n    var progressbar = $('#progressbar'),\r\n        max = progressbar.attr('max'),\r\n        time = (1000\/max)*5, \r\n        value = progressbar.val();\r\n\r\n    var loading = function() {\r\n        value += 1;\r\n        addValue = progressbar.val(value);\r\n\r\n        $('.progress-value').html(value + '%');\r\n\r\n        if (value == max) {\r\n            clearInterval(animate); \r\n        }\r\n    };\r\n\r\n    var animate = setInterval(function() {\r\n        loading();\r\n    }, time);\r\n});\r\n<\/pre>\n<p>Experience this dynamic feature in action and grab the source code from the links below.<\/p>\n<p><a href=\"https:\/\/hongkiat.github.io\/html5-progress-bar\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  View demo <\/span><\/a>\n<a href=\"https:\/\/github.com\/hongkiat\/html5-progress-bar\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Download source <\/span><\/a><\/p>\n<h2>Compatibility and Support<\/h2>\n<p>Per the insights from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/caniuse.com\/progressmeter\">CanIUse.com<\/a>, the HTML5 progress element enjoys robust support across major browsers, including Firefox 16+, Chrome 8+, Safari 6+, and Opera 11+.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-progress-bar\/browser-support.jpg\" alt=\"Browser support for the HTML5 progress element\" width=\"500\" height=\"265\"><\/figure>\n<p>For those browsers not yet on board, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lea.verou.me\/2011\/07\/a-polyfill-for-html5-progress-element-the-obsessive-perfectionist-way\/\">Lea Verou has crafted polyfills<\/a> that mimic the progress element\u2019s functionality, ensuring wider accessibility.<\/p>\n<h2>Additional Resources<\/h2>\n<p>To further your understanding of this versatile element, here are some invaluable resources:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.useragentman.com\/blog\/2012\/01\/03\/cross-browser-html5-progress-bars-in-depth\/\">Cross Browser HTML5 Progress Bar in Depth<\/a> by User Agent Man<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.matlus.com\/html5-file-upload-with-progress\/\">HTML5 file upload with progress<\/a> from the FileZilla Project<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/html\/wg\/drafts\/html\/master\/single-page.html#the-progress-element\">HTML5 Progress Documentation<\/a> at W3.org<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>HTML5 brought us the progress bar element, making it easier to visually represent the completion status of tasks like uploads or downloads. This guide will show you how to insert this element into your webpage, customize its appearance with CSS, and animate the progress meter for a dynamic user experience. Let\u2019s dive in. Understanding the&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3392,352],"tags":[507,506,2016,2112],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Creating &amp; Styling Progress Bar With HTML5 - Hongkiat<\/title>\n<meta name=\"description\" content=\"HTML5 brought us the progress bar element, making it easier to visually represent the completion status of tasks like uploads or downloads. This guide\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating &amp; Styling Progress Bar With HTML5\" \/>\n<meta property=\"og:description\" content=\"HTML5 brought us the progress bar element, making it easier to visually represent the completion status of tasks like uploads or downloads. This guide\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-02-25T13:01:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:29:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html5-progress-bar\/native-progress-bar.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-progress-bar\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-progress-bar\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Creating &amp; Styling Progress Bar With HTML5\",\"datePublished\":\"2013-02-25T13:01:36+00:00\",\"dateModified\":\"2025-04-03T17:29:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-progress-bar\\\/\"},\"wordCount\":720,\"commentCount\":25,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-progress-bar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-progress-bar\\\/native-progress-bar.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\",\"Progress Bar Design\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-progress-bar\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-progress-bar\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-progress-bar\\\/\",\"name\":\"Creating &amp; Styling Progress Bar With HTML5 - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-progress-bar\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-progress-bar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-progress-bar\\\/native-progress-bar.jpg\",\"datePublished\":\"2013-02-25T13:01:36+00:00\",\"dateModified\":\"2025-04-03T17:29:30+00:00\",\"description\":\"HTML5 brought us the progress bar element, making it easier to visually represent the completion status of tasks like uploads or downloads. This guide\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-progress-bar\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-progress-bar\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-progress-bar\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-progress-bar\\\/native-progress-bar.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-progress-bar\\\/native-progress-bar.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-progress-bar\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating &amp; Styling Progress Bar With HTML5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating &amp; Styling Progress Bar With HTML5 - Hongkiat","description":"HTML5 brought us the progress bar element, making it easier to visually represent the completion status of tasks like uploads or downloads. This guide","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/","og_locale":"en_US","og_type":"article","og_title":"Creating &amp; Styling Progress Bar With HTML5","og_description":"HTML5 brought us the progress bar element, making it easier to visually represent the completion status of tasks like uploads or downloads. This guide","og_url":"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-02-25T13:01:36+00:00","article_modified_time":"2025-04-03T17:29:30+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html5-progress-bar\/native-progress-bar.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Creating &amp; Styling Progress Bar With HTML5","datePublished":"2013-02-25T13:01:36+00:00","dateModified":"2025-04-03T17:29:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/"},"wordCount":720,"commentCount":25,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-progress-bar\/native-progress-bar.jpg","keywords":["CSS","HTML","HTML5 \/ CSS3 Tutorials","Progress Bar Design"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/","url":"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/","name":"Creating &amp; Styling Progress Bar With HTML5 - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-progress-bar\/native-progress-bar.jpg","datePublished":"2013-02-25T13:01:36+00:00","dateModified":"2025-04-03T17:29:30+00:00","description":"HTML5 brought us the progress bar element, making it easier to visually represent the completion status of tasks like uploads or downloads. This guide","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html5-progress-bar\/native-progress-bar.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-progress-bar\/native-progress-bar.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating &amp; Styling Progress Bar With HTML5"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4iv","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=16523"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16523\/revisions"}],"predecessor-version":[{"id":73574,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16523\/revisions\/73574"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16523"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}