{"id":52620,"date":"2020-11-09T21:16:15","date_gmt":"2020-11-09T13:16:15","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=52620"},"modified":"2020-11-04T23:18:07","modified_gmt":"2020-11-04T15:18:07","slug":"animated-progress-bar","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/animated-progress-bar\/","title":{"rendered":"15 Animated Progress Bars For Your Inspiration"},"content":{"rendered":"<p>Progress bars have one function that is, to inform the user about the progress of the task and how much time it\u2019s going to take for it to finish. This makes it a useful UX element for websites, surveys and other web assets.<\/p>\n<p>This post features some of the most creatively-designed progress animated progress bars that\u2019ll inspire you to make one for your own project. You\u2019ll find minimal and ingenious designs in this showcase. Let\u2019s take a look.<\/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\/progress-bar-designs\/\" class=\"ref-block__link\" title=\"Read More: 40+ Creative Progress Bar Designs, Vol. 2\" rel=\"bookmark\"><span class=\"screen-reader-text\">40+ Creative Progress Bar Designs, Vol. 2<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/progress-bar-designs.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-18267 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/progress-bar-designs.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">40+ Creative Progress Bar Designs, Vol. 2<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tA progress bar is a graphical representation of the completion of a task, and it is a crucial...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/11301109-Price-Range-Animation\">#1<\/a> @Alex Bender<\/h3>\n<p><video width=\"100%\" controls><source src=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/01.mp4\" type=\"video\/mp4\"><\/source><\/video><\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/4483904-Progress-Bar\">#2<\/a> @Matjaz Valentar<\/h3>\n<figure style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/02.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/02.gif?newedit?newedit\" alt=\"\" width=\"800\" height=\"600\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2742925-Day086-Progress-Bar\">#3<\/a> @Shunsuke Kawai<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/03.jpg?newedit\" alt=\"\" width=\"800\" height=\"600\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/3321197-App-Loader-for-Miloubar\">#4<\/a> @Chalom Asseraf<\/h3>\n<figure style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/04.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/04.gif?newedit?newedit\" alt=\"\" width=\"800\" height=\"600\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/3324509-Heart-Bar\">#5<\/a> @Chris Slowik<\/h3>\n<figure style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/05.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/05.gif?newedit?newedit\" alt=\"\" width=\"800\" height=\"600\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/3706819-Progress-bar-app-animation\">#6<\/a> @Lena Zaytseva<\/h3>\n<figure style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/06.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/06.gif?newedit?newedit\" alt=\"\" width=\"800\" height=\"600\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/4026985-If-only-I-could\">#7<\/a> @Gal Shir<\/h3>\n\n<figure style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/07.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/07.gif?newedit?newedit\" alt=\"\" width=\"800\" height=\"600\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/4126263-Neon-Loader\">#8<\/a> @Asif Adnan<\/h3>\n<figure style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/08.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/08.gif?newedit?newedit\" alt=\"\" width=\"800\" height=\"600\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/11654096-Download-Like-Animation\">#9<\/a> @Alex Bender<\/h3>\n<p><video width=\"100%\" controls><source src=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/02.mp4\" type=\"video\/mp4\"><\/source><\/video><\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/5334120-Progress-Bar-Animation-UX-Concept\">#10<\/a> @Gale G.<\/h3>\n<figure style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/10.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/10.gif?newedit?newedit\" alt=\"\" width=\"800\" height=\"600\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/5448364-Progress-Bar-VIII\">#11<\/a> @Oleg Frolov<\/h3>\n<figure style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/11.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/11.gif?newedit?newedit\" alt=\"\" width=\"800\" height=\"600\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/5971468-Liquid-Design-System-Bowl\">#12<\/a> @Max Brinckmann<\/h3>\n<p><video width=\"100%\" controls><source src=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/12.mp4\" type=\"video\/mp4\"><\/source><\/video><\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/6646026-Save-Money-Progress-Bar\">#13<\/a> @UMLEARN<\/h3>\n<figure style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/13.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/13.gif?newedit?newedit\" alt=\"\" width=\"800\" height=\"600\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/6667850-Circular-Progress-Bar\">#14<\/a> @Chuhan Cao<\/h3>\n<figure style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/14.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/14.gif?newedit?newedit\" alt=\"\" width=\"800\" height=\"600\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/9229667-086-Progress-Bar-Animation\">#15<\/a> @Daniel Alex Tatu<\/h3>\n<figure style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/15.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/15.gif?newedit?newedit\" alt=\"\" width=\"800\" height=\"600\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>Progress bars have one function that is, to inform the user about the progress of the task and how much time it\u2019s going to take for it to finish. This makes it a useful UX element for websites, surveys and other web assets. This post features some of the most creatively-designed progress animated progress bars&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2112],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>15 Animated Progress Bars For Your Inspiration - Hongkiat<\/title>\n<meta name=\"description\" content=\"Progress bars have one function that is, to inform the user about the progress of the task and how much time it&#039;s going to take for it to finish. This\" \/>\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\/animated-progress-bar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"15 Animated Progress Bars For Your Inspiration\" \/>\n<meta property=\"og:description\" content=\"Progress bars have one function that is, to inform the user about the progress of the task and how much time it&#039;s going to take for it to finish. This\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/animated-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=\"2020-11-09T13:16:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/02.jpg?newedit\" \/>\n<meta name=\"author\" content=\"Hongkiat Lim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hongkiat Lim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animated-progress-bar\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animated-progress-bar\\\/\"},\"author\":{\"name\":\"Hongkiat Lim\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e3613a3bf757e4f67770f0b7a339edd0\"},\"headline\":\"15 Animated Progress Bars For Your Inspiration\",\"datePublished\":\"2020-11-09T13:16:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animated-progress-bar\\\/\"},\"wordCount\":119,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animated-progress-bar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/animated-progress-bar\\\/02.jpg?newedit\",\"keywords\":[\"Progress Bar Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animated-progress-bar\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animated-progress-bar\\\/\",\"name\":\"15 Animated Progress Bars For Your Inspiration - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animated-progress-bar\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animated-progress-bar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/animated-progress-bar\\\/02.jpg?newedit\",\"datePublished\":\"2020-11-09T13:16:15+00:00\",\"description\":\"Progress bars have one function that is, to inform the user about the progress of the task and how much time it's going to take for it to finish. This\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animated-progress-bar\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animated-progress-bar\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animated-progress-bar\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/animated-progress-bar\\\/02.jpg?newedit\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/animated-progress-bar\\\/02.jpg?newedit\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animated-progress-bar\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"15 Animated Progress Bars For Your Inspiration\"}]},{\"@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\\\/e3613a3bf757e4f67770f0b7a339edd0\",\"name\":\"Hongkiat Lim\",\"description\":\"Founder and Editor in Chief of Hongkiat.com. Hongkiat is also a designer, developer, entrepreneur, and an active investor in the US stock market.\",\"sameAs\":[\"http:\\\/\\\/www.hongkiat.com\\\/blog\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/hongkiat\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"15 Animated Progress Bars For Your Inspiration - Hongkiat","description":"Progress bars have one function that is, to inform the user about the progress of the task and how much time it's going to take for it to finish. This","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\/animated-progress-bar\/","og_locale":"en_US","og_type":"article","og_title":"15 Animated Progress Bars For Your Inspiration","og_description":"Progress bars have one function that is, to inform the user about the progress of the task and how much time it's going to take for it to finish. This","og_url":"https:\/\/www.hongkiat.com\/blog\/animated-progress-bar\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-11-09T13:16:15+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/02.jpg?newedit","type":"","width":"","height":""}],"author":"Hongkiat Lim","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Hongkiat Lim","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/animated-progress-bar\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/animated-progress-bar\/"},"author":{"name":"Hongkiat Lim","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e3613a3bf757e4f67770f0b7a339edd0"},"headline":"15 Animated Progress Bars For Your Inspiration","datePublished":"2020-11-09T13:16:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/animated-progress-bar\/"},"wordCount":119,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/animated-progress-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/02.jpg?newedit","keywords":["Progress Bar Design"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/animated-progress-bar\/","url":"https:\/\/www.hongkiat.com\/blog\/animated-progress-bar\/","name":"15 Animated Progress Bars For Your Inspiration - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/animated-progress-bar\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/animated-progress-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/02.jpg?newedit","datePublished":"2020-11-09T13:16:15+00:00","description":"Progress bars have one function that is, to inform the user about the progress of the task and how much time it's going to take for it to finish. This","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/animated-progress-bar\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/animated-progress-bar\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/animated-progress-bar\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/02.jpg?newedit","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/animated-progress-bar\/02.jpg?newedit"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/animated-progress-bar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"15 Animated Progress Bars For Your Inspiration"}]},{"@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\/e3613a3bf757e4f67770f0b7a339edd0","name":"Hongkiat Lim","description":"Founder and Editor in Chief of Hongkiat.com. Hongkiat is also a designer, developer, entrepreneur, and an active investor in the US stock market.","sameAs":["http:\/\/www.hongkiat.com\/blog"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/hongkiat\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-dGI","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/52620","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=52620"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/52620\/revisions"}],"predecessor-version":[{"id":52621,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/52620\/revisions\/52621"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=52620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=52620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=52620"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=52620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}