progress-bar.html<\/em><\/span><\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title>HTML5 Progress Bar<\/title>\r\n <style>\r\n .wrapper {\r\n width: 60%;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"wrapper\">\r\n <h1>HTML5 progress bar<\/h1>\r\n <progress class=\"custom-progress\" max=\"100\" value=\"40\"><\/progress>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\nLet’s see how it’s rendered by each browser:<\/p>\n1. Progress bar native rendering by each browser.<\/figcaption><\/figure>\nAs we can see, the default rendering of the bar is pretty inconsistent across the different browsers. Let’s see how to customize it, making the progress bar look the same for each browser.<\/p>\n
2. Styling\u00a0the bar<\/h2>\n As seen before, we shouldn’t use the default progress bar rendering. We must care about the consistency of our web pages for every browser, or at least the most relevant ones. Now, we are going to make the bar look more attractive, for every browser.<\/p>\n
For example, for the following progress bar:<\/p>\n2. Customized progress bar.<\/figcaption><\/figure>\nCustomizing the progress bar is a bit tricky, since each browser interprets the progress<\/code> tag differently. So, we will have to use pseudo-classes for different browser engines. This is how we have done it for the bar above:<\/p>\nstyle.css<\/span><\/em><\/p>\n\/**\r\n * Cross-browser\/Non specific selector\r\n *\/\r\n\r\n.custom-progress {\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n width: 100%;\r\n height: 40px;\r\n\r\n \/* Outer bar *\/\r\n border: none;\r\n border-radius: 18px;\r\n background-color: #303a52;\r\n}\r\n\r\n\/**\r\n * Webkit\r\n *\/\r\n\r\n\/* Outer bar *\/\r\n.custom-progress::-webkit-progress-bar {\r\n border-radius: 18px;\r\n background-color: #303a52;\r\n}\r\n\r\n\/* Inner bar *\/\r\n.custom-progress::-webkit-progress-value {\r\n border-radius: 18px;\r\n background: repeating-linear-gradient(\r\n 135deg,\r\n #606dbc,\r\n #606dbc 10px,\r\n #465298 10px,\r\n #465298 20px\r\n );\r\n}\r\n\r\n\/**\r\n * Mozilla\r\n *\/\r\n\r\n\/* Inner bar *\/\r\n\r\n.custom-progress::-moz-progress-bar {\r\n border-radius: 18px;\r\n background: repeating-linear-gradient(\r\n 135deg,\r\n #606dbc,\r\n #606dbc 10px,\r\n #465298 10px,\r\n #465298 20px\r\n );\r\n}\r\n\r\n\/**\r\n * IE\/Edge\r\n *\/\r\n\r\n \/* Inner bar *\/\r\n\r\n.custom-progress::-ms-fill {\r\n border-radius: 18px;\r\n background: repeating-linear-gradient(\r\n 135deg,\r\n #606dbc,\r\n #606dbc 10px,\r\n #465298 10px,\r\n #465298 20px\r\n );\r\n}<\/pre>\nPD: don’t forget to include the stylesheet in the HTML page:<\/p>\n
progress-bar.html<\/em><\/span><\/p>\n<head>\r\n <!-- ... --> \r\n <link rel=\"stylesheet\" href=\"style.css\">\r\n <!-- ... -->\r\n<\/head><\/pre>\nFirstly, when using no browser selector, we do two things: reset the appearances applied by the browsers, for styling the progress bar from the scratch; and outer bar’s border and color for every browser that is not Webkit engine. This is because, for Webkit, we have to use a specific selector for this outer bar.<\/p>\n
After this, we have to define the style for the inner bar for the remaining browsers (and also the outer one, for Webkit). The selectors are the following ones:<\/p>\n
\nFor Webkit: :-webkit-progress-bar<\/code> for the outer bar, and :-webkit-progress-value<\/code> for the inner one.<\/li>\nFor Mozilla: :-moz-progress-bar<\/code> for the inner bar.<\/li>\nFor IE\/Edge: :-ms-fill<\/code> for the inner bar.<\/li>\n<\/ul>\nNote<\/strong>: you may have noticed that we could reduce the repetition of the rules for the inner bar and group them, but, for some reason, when grouping them, the progress bar is not being rendered according to those rules.<\/p>\n3.\u00a0Animations<\/h2>\n After seeing how to customize our progress bar, it’s time for animating it. This can be easily done with a piece of JavaScript code. The simplest way is just making a “fixed” animation, that is, updating the progress manually, without actually showing a current task that is being loaded.<\/p>\n
For this, the following JavaScript code would be enough:<\/p>\n
script.js<\/em><\/span><\/p>\nsetInterval(function(){\r\n var progress = document.getElementById('custom-progress');\r\n\r\n if (progress.value < progress.max) {\r\n progress.value += 1;\r\n }\r\n\r\n}, 25);<\/pre>\nSo simple: the progress bar value will be incremented by one unit, every 25 milliseconds, until it has reached its maximum value.<\/p>\n
PD: Don’t forget to include the script in the HTML file:<\/p>\n
progress-bar.html<\/em><\/span><\/p>\n<head>\r\n <!-- ... --> \r\n <script src=\"script.js\"><\/script>\r\n <!-- ... -->\r\n<\/head><\/pre>\nAnd, for this case, we have also defined an id for the element. And, we also set the value to 0, from loading the bar from the beginning:<\/p>\n
<!-- ... -->\r\n<progress id=\"custom-progress\" class=\"custom-progress\" max=\"100\" value=\"0\"><\/progress>\r\n<!-- ... --><\/pre>\n3.1. Displaying the progress value<\/h3>\n When a progress bar is being loaded, usually, the numerical value representing the progress is show with it. This can be easily done with the content<\/code> property in combination with attr<\/code>, showing it after the bar, for example:<\/p>\nstyle.css<\/em><\/span><\/p>\n\/* ... *\/\r\n\r\n.custom-progress:after {\r\n content: attr(value);\r\n}\r\n\r\n\/* ... *\/<\/pre>\nThe value will be shown as in the following image, for example.<\/p>\n3. Showing progress numerical status.<\/figcaption><\/figure>\nWe have to take into account that, if for any case, we don’t use [0, 100] value range in our progress bar, we should use JavaScript in order to calculate the actual percentage. Otherwise, we would be showing a senseless number to the user.<\/p>\n
4. Summary<\/h2>\n This example has shown the usage of the HTML5\u00a0progress<\/code> element, which has a native support by the browsers. But, despite that, each browser engine renders it in a different way by default, so that’s why we should customize it with CSS, for keeping a consistency, paying always attention to the selectors needed for each browser. Finally, we have seen how to make an easy animation with a very simple JavaScript script.<\/p>\n5. Download the source code<\/h2>\n This was an example of progress bar with HTML5.<\/p>\n
Download<\/strong>HTML5ProgressBarExample<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"There are several possibilities for which we may use a progress bar in a web page. The most typical ones are for showing the download or upload state of a file. HTML5 introduced a native element for this, the tag progress. So, we don’t need any jQuery plugin or custom-complicated HTML in combination with CSS\u00a0for …<\/p>\n","protected":false},"author":160,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-16707","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5"],"yoast_head":"\n
HTML5 Progress Bar Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"There are several possibilities for which we may use a progress bar in a web page. The most typical ones are for showing the download or upload state of a\" \/>\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.webcodegeeks.com\/html5\/html5-progress-bar-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Progress Bar Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"There are several possibilities for which we may use a progress bar in a web page. The most typical ones are for showing the download or upload state of a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-30T12:00:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T11:42:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Toni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Toni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/\"},\"author\":{\"name\":\"Toni\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/54a7be647b0b871cff41cbf3d2a95966\"},\"headline\":\"HTML5 Progress Bar Example\",\"datePublished\":\"2017-03-30T12:00:39+00:00\",\"dateModified\":\"2017-12-19T11:42:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/\"},\"wordCount\":809,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/\",\"name\":\"HTML5 Progress Bar Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2017-03-30T12:00:39+00:00\",\"dateModified\":\"2017-12-19T11:42:10+00:00\",\"description\":\"There are several possibilities for which we may use a progress bar in a web page. The most typical ones are for showing the download or upload state of a\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Progress Bar Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/54a7be647b0b871cff41cbf3d2a95966\",\"name\":\"Toni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/21c1661474c78b4757355b8beef9ab1d14f490ee3a3e67392f4e618d36643d4c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/21c1661474c78b4757355b8beef9ab1d14f490ee3a3e67392f4e618d36643d4c?s=96&d=mm&r=g\",\"caption\":\"Toni\"},\"url\":\"https:\/\/www.webcodegeeks.com\/author\/julen-pardo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Progress Bar Example - Web Code Geeks - 2026","description":"There are several possibilities for which we may use a progress bar in a web page. The most typical ones are for showing the download or upload state of a","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.webcodegeeks.com\/html5\/html5-progress-bar-example\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Progress Bar Example - Web Code Geeks - 2026","og_description":"There are several possibilities for which we may use a progress bar in a web page. The most typical ones are for showing the download or upload state of a","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-03-30T12:00:39+00:00","article_modified_time":"2017-12-19T11:42:10+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Toni","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Toni","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/"},"author":{"name":"Toni","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/54a7be647b0b871cff41cbf3d2a95966"},"headline":"HTML5 Progress Bar Example","datePublished":"2017-03-30T12:00:39+00:00","dateModified":"2017-12-19T11:42:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/"},"wordCount":809,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/","name":"HTML5 Progress Bar Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2017-03-30T12:00:39+00:00","dateModified":"2017-12-19T11:42:10+00:00","description":"There are several possibilities for which we may use a progress bar in a web page. The most typical ones are for showing the download or upload state of a","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-progress-bar-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 Progress Bar Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/54a7be647b0b871cff41cbf3d2a95966","name":"Toni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/21c1661474c78b4757355b8beef9ab1d14f490ee3a3e67392f4e618d36643d4c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/21c1661474c78b4757355b8beef9ab1d14f490ee3a3e67392f4e618d36643d4c?s=96&d=mm&r=g","caption":"Toni"},"url":"https:\/\/www.webcodegeeks.com\/author\/julen-pardo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/16707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/160"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=16707"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/16707\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=16707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=16707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=16707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"1.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/progress_bar_native.jpg\")
![\"2.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/custom_progress-1.jpg\")
![\"3.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/03\/value.jpg\")