{"id":18267,"date":"2020-11-04T23:10:31","date_gmt":"2020-11-04T15:10:31","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18267"},"modified":"2023-04-28T20:42:39","modified_gmt":"2023-04-28T12:42:39","slug":"progress-bar-designs","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/progress-bar-designs\/","title":{"rendered":"40+ Creative Progress Bar Designs, Vol. 2"},"content":{"rendered":"<p>A progress bar is a graphical representation of the completion of a task, and it is a crucial component in many web and mobile applications. It helps users to understand how much work is left to complete and provides feedback on the progress of a particular action. A well-designed progress bar not only enhances the user experience but also adds to the visual appeal of the application.<\/p>\n<p>In this blog post, we will explore 40 creative progress bar designs that can inspire you to design your own progress bar for your web or mobile application.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/10038858-Progress-Bar\">#1<\/a> @Ben Mettler<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/01.jpg\" width=\"800\" height=\"600\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/13996623-Daily-UI-086-Progress-Bar\">#2<\/a> @Vlad Grama<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/02.jpg\" width=\"800\" height=\"600\" alt=\"creative progress bars\"><\/figure>\n<h3>#03 @Marcus Forsberg<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/35-Circular-progress-bar-by-Marcus-Forsberg.jpg\" width=\"500\" height=\"300\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/3371475-Progress-Bar-UI-Pattern\">#4<\/a> @Sam Atmore<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/04.jpg\" width=\"800\" height=\"600\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/5254809-Day-01-The-Load-progress-bar\">#5<\/a> @Sailing<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/05.jpg\" width=\"800\" height=\"600\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/5608615-UI-red\">#6<\/a> @Tanya<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/06.jpg\" width=\"800\" height=\"600\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/6563545-3d-Progress-bar\">#7<\/a> @Pramod Kabadi<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/07.jpg\" width=\"800\" height=\"600\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/6773356-Progress-Indicator\">#8<\/a> @Oxygenna<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/08.jpg\" width=\"800\" height=\"600\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/118285-Welcome-Steps\">#9<\/a> @Luke Beard<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/3-Welcome-Steps-by-Luke-Beard.jpg\" width=\"500\" height=\"375\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/126270-Remake-of-first-shot\">#10<\/a> @Kamil Khadeyev<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/4-Remake-of-first-shot-by-Kamil-Khadeyev.jpg\" width=\"500\" height=\"238\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/198056-Bee-progress-bar\">#11<\/a> @Andrew Ckor<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/14-Bee-progress-bar-by-Andrew-Ckor.jpg\" width=\"500\" height=\"300\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/202485-loading\">#12<\/a> @Bryan Sleiter<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/38-loading-by-Bryan-Sleiter.jpg\" width=\"500\" height=\"300\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/239109-loading\">#13<\/a> @Evgeny Skidanov<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/10-Loading-by-Evgeny-Skidanov.jpg\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/246565-Checkout-page-for-Madein33\">#14<\/a> @David Cadusseau<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/11-Checkout-page-for-Madein33-by-David-Cadusseau.jpg\" width=\"500\" height=\"375\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/29288-Toxic-progress-bar-3D\">#15<\/a> @Alex Patrascu<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/22-Toxic-progress-bar-3D-by-Alex-Patrascu.jpg\" width=\"500\" height=\"300\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/358321-Enter-Card-Details\">#16<\/a> @James<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/8-Enter-Card-Details-by-James.jpg\" width=\"500\" height=\"375\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/373831-Brick-UI\">#17<\/a> @Denis Perepelenko<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/25-Progress-bar-by-Denis-Perepelenko.jpg\" width=\"500\" height=\"300\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/373831-Brick-UI\">#18<\/a> @Ryan Putnam<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/21-Brick-UI-by-Ryan-Putnam.jpg\" width=\"500\" height=\"375\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/375364-Glass-UI\">#19<\/a> @Ryan Putnam<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/5-Glass-UI-by-Ryan-Putnam.jpg\" width=\"500\" height=\"244\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/428648-Loader-Fly\">#20<\/a> @Lumen Bigott<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/29-Loader-Fly-by-Lumen-Bigott.jpg\" width=\"500\" height=\"375\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/550803-Steps\">#21<\/a> @Nadine Haardt<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/7-Steps-by-Nadine-Haardt.jpg\" width=\"500\" height=\"300\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/566203-Progression-thing\">#22<\/a> @Alberto Jeldez<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/34-Progression-thing-by-Alberto-Jeldez.jpg\" width=\"500\" height=\"300\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/575969-Pro-grass-Bar\">#23<\/a> @domm<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/19-Pro-grass-Bar-by-DMDN.jpg\" width=\"500\" height=\"375\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/584096-Space-progress-bar\">#24<\/a> @Mladen Zivanovic<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/27-Space-progress-bar-by-Mladen-Zivanovic.jpg\" width=\"500\" height=\"339\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/616940-Loading\">#25<\/a> @Andre Felipe Ribeiro<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/24-Loading-by-Andre-Felipe-Ribeiro.jpg\" width=\"500\" height=\"337\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/619516-iOS-Splash-Screen\">#26<\/a> @Kerem Suer<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/18-iOS-Splash-Screen-by-Kerem-Suer.jpg\" width=\"500\" height=\"314\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/623155-Amount-of-water\">#27<\/a> @Romina Kavcic<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/17-Amount-of-water-by-Romina-Kavcic.jpg\" width=\"500\" height=\"375\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/667741-Progress-Bar\">#28<\/a> @Nina Geometrieva<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/16-Progress-Bar-by-Nina-Geometrievna.jpg\" width=\"500\" height=\"300\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/709805-Getting-Started-Wizard\">#29<\/a> @Missy Titus<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/28-Getting-Started-Wizard-by-Missy-Titus.jpg\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/746318-Progress-Bar\">#30<\/a> @Bojan Janjanin<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/12-Progress-Bar-by-Bojan-Janjanin.jpg\" width=\"500\" height=\"235\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/768163-Round-Loading\">#31<\/a> @Sanja Veljanoska<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/32-Round-Loading-by-Sanja-Veljanoska.jpg\" width=\"500\" height=\"375\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/772003-RE-Progress-Wheel\">#32<\/a> @Thuy Gia Nguyen<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/30-RE-Progress-Wheel-by-Thuy-Gia-Nguyen.jpg\" width=\"500\" height=\"366\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/773791-Progress-Bar-Icons\">#33<\/a> @Joshua Sortino<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/23-Progress-Bar-Icons-by-Joshua-Sortino.jpg\" width=\"500\" height=\"375\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/791642-Animated-CSS-Progress-Bar\">#34<\/a> @Sascha Michael Trinkaus<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/20-Animated-CSS-Progress-Bar-by-Sascha-Michael-Trinkaus.jpg\" width=\"500\" height=\"300\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/811567-1-2-3-Done\">#35<\/a> @Eryk Pastwa<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/1-1-2-3-done-pregress-bar.jpg\" width=\"500\" height=\"310\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/821536-Just-loader\">#36<\/a> @Balazs Szarka<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/36-Just-loader-by-Balazs-Szarka.jpg\" width=\"500\" height=\"375\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/861370-Progress-Bar\">#37<\/a> @Peter Gajdos<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/39-Progress-Bar-by-Peter-Gajdos.jpg\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/915683-Progress-bar\">#38<\/a> @Jekaterina<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/40-Progress-bar-by-Jekaterina.jpg\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/941233-Thanks\">#39<\/a> @Mathieu Oftadeh<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/31-Thanks-by-Mathieu-Oftadeh.jpg\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/981453-Progress-Bar-2x\">#40<\/a> @B\u00e9la Lajos<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/37-Progress-Bar-by-Bela-Lajos.jpg\" width=\"500\" height=\"300\" alt=\"creative progress bars\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.behance.net\/gallery\/3684159\/Fire-Flame-Flame-Fire-Flame-Loader\">#41<\/a> @Mike DelGuidice<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/2-Fire-Flame-Flame-Fire-Flame-Loader-by-Mike-DelGuidice.jpg\" width=\"500\" height=\"282\" alt=\"creative progress bars\"><\/figure>\n<h3>#42 @Andrea Cau<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/6-Loading-Bar-by-Andrea-Cau.jpg\" width=\"500\" height=\"325\" alt=\"creative progress bars\"><\/figure>\n<h3>#43 @Jan Losert<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/15-Progress-Bar-by-Jan-Losert.jpg\" width=\"500\" height=\"300\" alt=\"creative progress bars\"><\/figure>\n<h3>#44 @Voyover<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/26-Yellow-Uploading-by-Voyover.jpg\" width=\"500\" height=\"300\" alt=\"creative progress bars\"><\/figure>\n<h3>#45 @Voyover<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/33-Rusty-progress-bar-by-Voyover.jpg\" width=\"500\" height=\"375\" alt=\"creative progress bars\"><\/figure>\n<h3>#46 @Roman Bulah<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/9-Progress-Bar-by-Roman-Bulah.jpg\" width=\"500\" height=\"235\" alt=\"creative progress bars\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>A progress bar is a graphical representation of the completion of a task, and it is a crucial component in many web and mobile applications. It helps users to understand how much work is left to complete and provides feedback on the progress of a particular action. A well-designed progress bar not only enhances the&hellip;<\/p>\n","protected":false},"author":124,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[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.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>40+ Creative Progress Bar Designs, Vol. 2 - Hongkiat<\/title>\n<meta name=\"description\" content=\"A progress bar is a graphical representation of the completion of a task, and it is a crucial component in many web and mobile applications. It helps\" \/>\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\/progress-bar-designs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"40+ Creative Progress Bar Designs, Vol. 2\" \/>\n<meta property=\"og:description\" content=\"A progress bar is a graphical representation of the completion of a task, and it is a crucial component in many web and mobile applications. It helps\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/progress-bar-designs\/\" \/>\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-04T15:10:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-28T12:42:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/01.jpg\" \/>\n<meta name=\"author\" content=\"Nancy Young\" \/>\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=\"Nancy Young\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progress-bar-designs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progress-bar-designs\\\/\"},\"author\":{\"name\":\"Nancy Young\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/943d20daf5b8c7638175cba309ef6e32\"},\"headline\":\"40+ Creative Progress Bar Designs, Vol. 2\",\"datePublished\":\"2020-11-04T15:10:31+00:00\",\"dateModified\":\"2023-04-28T12:42:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progress-bar-designs\\\/\"},\"wordCount\":187,\"commentCount\":27,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progress-bar-designs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/progress-bar-designs\\\/01.jpg\",\"keywords\":[\"Progress Bar Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progress-bar-designs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progress-bar-designs\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progress-bar-designs\\\/\",\"name\":\"40+ Creative Progress Bar Designs, Vol. 2 - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progress-bar-designs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progress-bar-designs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/progress-bar-designs\\\/01.jpg\",\"datePublished\":\"2020-11-04T15:10:31+00:00\",\"dateModified\":\"2023-04-28T12:42:39+00:00\",\"description\":\"A progress bar is a graphical representation of the completion of a task, and it is a crucial component in many web and mobile applications. It helps\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progress-bar-designs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progress-bar-designs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progress-bar-designs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/progress-bar-designs\\\/01.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/progress-bar-designs\\\/01.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progress-bar-designs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"40+ Creative Progress Bar Designs, Vol. 2\"}]},{\"@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\\\/943d20daf5b8c7638175cba309ef6e32\",\"name\":\"Nancy Young\",\"description\":\"Nancy has over seven years of experience in writing for different online mediums. Her expertise lies in creating inspirational articles with beautiful images.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/nancy_young\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"40+ Creative Progress Bar Designs, Vol. 2 - Hongkiat","description":"A progress bar is a graphical representation of the completion of a task, and it is a crucial component in many web and mobile applications. It helps","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\/progress-bar-designs\/","og_locale":"en_US","og_type":"article","og_title":"40+ Creative Progress Bar Designs, Vol. 2","og_description":"A progress bar is a graphical representation of the completion of a task, and it is a crucial component in many web and mobile applications. It helps","og_url":"https:\/\/www.hongkiat.com\/blog\/progress-bar-designs\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-11-04T15:10:31+00:00","article_modified_time":"2023-04-28T12:42:39+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/01.jpg","type":"","width":"","height":""}],"author":"Nancy Young","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Nancy Young","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/progress-bar-designs\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/progress-bar-designs\/"},"author":{"name":"Nancy Young","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/943d20daf5b8c7638175cba309ef6e32"},"headline":"40+ Creative Progress Bar Designs, Vol. 2","datePublished":"2020-11-04T15:10:31+00:00","dateModified":"2023-04-28T12:42:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/progress-bar-designs\/"},"wordCount":187,"commentCount":27,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/progress-bar-designs\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/01.jpg","keywords":["Progress Bar Design"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/progress-bar-designs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/progress-bar-designs\/","url":"https:\/\/www.hongkiat.com\/blog\/progress-bar-designs\/","name":"40+ Creative Progress Bar Designs, Vol. 2 - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/progress-bar-designs\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/progress-bar-designs\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/01.jpg","datePublished":"2020-11-04T15:10:31+00:00","dateModified":"2023-04-28T12:42:39+00:00","description":"A progress bar is a graphical representation of the completion of a task, and it is a crucial component in many web and mobile applications. It helps","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/progress-bar-designs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/progress-bar-designs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/progress-bar-designs\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/01.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/progress-bar-designs\/01.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/progress-bar-designs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"40+ Creative Progress Bar Designs, Vol. 2"}]},{"@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\/943d20daf5b8c7638175cba309ef6e32","name":"Nancy Young","description":"Nancy has over seven years of experience in writing for different online mediums. Her expertise lies in creating inspirational articles with beautiful images.","url":"https:\/\/www.hongkiat.com\/blog\/author\/nancy_young\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4KD","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18267","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\/124"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=18267"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18267\/revisions"}],"predecessor-version":[{"id":66741,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18267\/revisions\/66741"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18267"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}