{"componentChunkName":"component---src-templates-blog-js","path":"/blog/how-to-build-tailwindcss-progressbar/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"e867cd05-ea44-51ed-b938-4e8bdee5067a","excerpt":"Tailwind Progress Bar A progress bar is a graphical element that visually represents the completion status of a task or process. It is commonly used to provide…","body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"How to build Tailwind Progress Bar.\",\n  \"lastUpdated\": \"19 May 2024\",\n  \"date\": \"2024-01-10T02:16:04+01:00\",\n  \"metaTitle\": \"Tailwind CSS Progress Bar\",\n  \"metaDescription\": \" In this tutorial, we will walk you through the process of building a Tailwind progress bar. Tailwind CSS is a popular utility-first CSS framework that allows you to quickly and easily create custom UI components. With its extensive set of utility classes, creating a progress bar becomes a breeze.\",\n  \"type\": \"blog\",\n  \"author\": \"Emmanuel Chinonso\",\n  \"role\": \"Technical Writer/Web Developer\",\n  \"authorImage\": \"/blog/author/author_emmanuel.jpg\",\n  \"image\": \"./_/images/how-build-tailwind-progress-bar.png\",\n  \"tags\": [\"tailwind css\", \"bootstrap\", \"bootstrap 5 alpha\"],\n  \"previousTitle\": \" How to add tailwind CSS colors and Fonts to your project\",\n  \"previousPath\": \"how-to-add-tailwind-css-colors-and-fonts-to-your-project\",\n  \"nextTitle\": \"How to create a Beautiful Responsive Navigation bar Using Tailwind CSS\",\n  \"nextPath\": \"how-to-create-a-beautiful-responsive-navbar-using-tailwind-css\",\n  \"blogtype\": \"tailwindcss\",\n  \"canonicalUrl\": \"https://windframe.dev/blog/how-to-build-tailwindcss-progressbar\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind Progress Bar\"), mdx(\"p\", null, \"A progress bar is a graphical element that visually represents the completion status of a task or process. It is commonly used to provide feedback to users on the progress of a task, such as file uploads, form submissions, or page loading.\"), mdx(\"p\", null, \"In this guide, we will walk you through the process of building a progress bar using Tailwind CSS, a popular utility-first CSS framework. With Tailwind CSS's extensive set of utility classes, creating a progress bar becomes a breeze.\"), mdx(\"h2\", null, \"Prerequisites\"), mdx(\"p\", null, \"To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, make sure you have Tailwind CSS installed in your project.\"), mdx(\"h2\", null, \"Step 1: Set Up the HTML Structure\"), mdx(\"p\", null, \"First, let's set up the HTML structure for our progress bar. Open your preferred code editor and create a new HTML file called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.html\"), \". Add the following code:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n  <head>\\n    <meta charset=\\\"UTF-8\\\" />\\n    <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\" />\\n    <link\\n      href=\\\"<https://cdn.jsdelivr.net/npm/tailwindcss@2.0.2/dist/tailwind.min.css>\\\"\\n      rel=\\\"stylesheet\\\"\\n    />\\n    <title>Tailwind Progress Bar</title>\\n  </head>\\n  <body>\\n    <div class=\\\"h-4 bg-gray-200 rounded\\\">\\n      <div class=\\\"h-full bg-indigo-500 rounded\\\"></div>\\n    </div>\\n  </body>\\n</html>\\n\")), mdx(\"p\", null, \"In this code snippet, we start by including the necessary \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<meta>\"), \" tags for character set and viewport settings. We then link to the Tailwind CSS CDN to access the framework's utility classes. Inside the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<body>\"), \" tag, we create a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element with the classes \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"h-4 bg-gray-200 rounded\"), \", which sets the background color and border radius for the progress bar. Inside this div, we add another \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element with the classes \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"h-full bg-blue-500 rounded\"), \", which represents the progress itself.\"), mdx(\"h2\", null, \"Step 2: Apply Tailwind CSS Utility Classes\"), mdx(\"p\", null, \"Now that we have set up the HTML structure, let's apply Tailwind CSS utility classes to style our progress bar. Open your HTML file in a web browser or run a local development server, and you will see a basic progress bar with a gray background. However, it doesn't show any progress yet.\"), mdx(\"p\", null, \"To make the progress bar dynamic, we need to add inline styles using Tailwind CSS utility classes. Update the inner \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element as follows:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"h-full bg-indigo-500 rounded\\\" style=\\\"width: 30%;\\\"></div>\\n\")), mdx(\"p\", null, \"In this example, we added the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style\"), \" attribute to the inner \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element and set the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"width\"), \" property to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"30%\"), \". This will make the progress bar fill 60% of the outer container.\"), mdx(\"h2\", null, \"Step 3: Make the Progress Bar Responsive\"), mdx(\"p\", null, \"By default, Tailwind CSS provides responsive utility classes that allow you to adjust the width of the progress bar based on different screen sizes. To make our progress bar responsive, we can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"w-1/2\"), \" class, which sets the width to 50% on small screens and 100% on larger screens.\"), mdx(\"p\", null, \"Update the inner \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element's \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style\"), \" attribute as follows:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"h-full bg-indigo-500 rounded w-1/2 sm:w-full\\\"></div>\\n\")), mdx(\"p\", null, \"In this code snippet, we added the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"w-1/2\"), \" class, which sets the width to 50% on small screens. We also added the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"sm:w-full\"), \" class, which sets the width to 100% on screens larger than the small breakpoint.\"), mdx(\"h2\", null, \"Step 4: Add Animation to the Progress Bar\"), mdx(\"p\", null, \"To make our progress bar visually appealing, we can add a smooth animation that provides a visual representation of progress. Tailwind CSS provides utility classes for animation, making it easy to add animation effects to our progress bar.\"), mdx(\"p\", null, \"Update the inner \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element as follows:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"m-10\\\">\\n  <div class=\\\"h-4 w-full bg-gray-300 dark:bg-neutral-600 overflow-hidden\\\">\\n    <div\\n      class=\\\"flex flex-col justify-center h-full bg-indigo-500 rounded transition-width duration-500 ease-in-out leading-none\\\"\\n      style=\\\"width: 30%\\\"\\n    ></div>\\n  </div>\\n</div>\\n\")), mdx(\"p\", null, \"In this example, we added the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"transition-width\"), \" class, which specifies that the width transition should be animated. We also added the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"duration-500\"), \" class, which sets the animation duration to 500 milliseconds, and the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ease-in-out\"), \" class, which applies a smooth easing effect to the animation.\"), mdx(\"div\", {\n    className: \"m-10\"\n  }, mdx(\"div\", {\n    className: \"h-4 w-full bg-gray-300 dark:bg-neutral-600 overflow-hidden\"\n  }, mdx(\"div\", {\n    className: \"flex flex-col justify-center h-full bg-indigo-500 rounded transition-width duration-500 ease-in-out leading-none\",\n    style: {\n      \"width\": \"30%\"\n    }\n  }))), mdx(\"h2\", null, \"Progress bar with label inside\"), mdx(\"p\", null, \"Progress bar with label inside. \"), mdx(\"div\", {\n    className: \"flex flex-col gap-5\"\n  }, mdx(\"div\", {\n    className: \"flex w-full h-4 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700\"\n  }, mdx(\"div\", {\n    className: \"flex flex-col justify-center rounded-full overflow-hidden bg-indigo-600 text-xs text-white text-center whitespace-nowrap dark:bg-indigo-500 transition duration-500\",\n    style: {\n      \"width\": \"25%\"\n    }\n  }, \"25%\")), mdx(\"div\", {\n    className: \"flex w-full h-4 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700\"\n  }, mdx(\"div\", {\n    className: \"flex flex-col justify-center rounded-full overflow-hidden bg-indigo-600 text-xs text-white text-center whitespace-nowrap dark:bg-indigo-500 transition duration-500\",\n    style: {\n      \"width\": \"50%\"\n    }\n  }, \"50%\")), mdx(\"div\", {\n    className: \"flex w-full h-4 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700\"\n  }, mdx(\"div\", {\n    className: \"flex flex-col justify-center rounded-full overflow-hidden bg-indigo-600 text-xs text-white text-center whitespace-nowrap dark:bg-indigo-500 transition duration-500\",\n    style: {\n      \"width\": \"75%\"\n    }\n  }, \"75%\")), mdx(\"div\", {\n    className: \"flex w-full h-4 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700\"\n  }, mdx(\"div\", {\n    className: \"flex flex-col justify-center rounded-full overflow-hidden bg-indigo-600 text-xs text-white text-center whitespace-nowrap dark:bg-indigo-500 transition duration-500\",\n    style: {\n      \"width\": \"100%\"\n    }\n  }, \"100%\"))), mdx(\"h2\", null, \"Muticolor Progress bar\"), mdx(\"p\", null, \"Multicolor progress bar\"), mdx(\"div\", {\n    className: \"m-10\"\n  }, mdx(\"div\", {\n    className: \"mb-6 rounded h-3 w-full bg-gray-200 dark:bg-neutral-600\"\n  }, mdx(\"div\", {\n    className: \"h-3 rounded bg-green-500\",\n    style: {\n      \"width\": \"15%\"\n    }\n  })), mdx(\"div\", {\n    className: \"mb-6 rounded h-3 w-full bg-gray-200 dark:bg-neutral-600\"\n  }, mdx(\"div\", {\n    className: \"h-3 rounded bg-yellow-500\",\n    style: {\n      \"width\": \"25%\"\n    }\n  })), mdx(\"div\", {\n    className: \"mb-6 rounded h-3 w-full bg-gray-200 dark:bg-neutral-600\"\n  }, mdx(\"div\", {\n    className: \"h-3 rounded bg-black\",\n    style: {\n      \"width\": \"50%\"\n    }\n  })), mdx(\"div\", {\n    className: \"mb-6 h-3 w-full bg-gray-200 dark:bg-neutral-600\"\n  }, mdx(\"div\", {\n    className: \"h-3 rounded bg-blue-400\",\n    style: {\n      \"width\": \"75%\"\n    }\n  })), mdx(\"div\", {\n    className: \"mb-6 h-3 rounded w-full bg-gray-200 dark:bg-neutral-600\"\n  }, mdx(\"div\", {\n    className: \"h-3 rounded bg-purple-500\",\n    style: {\n      \"width\": \"90%\"\n    }\n  })), mdx(\"div\", {\n    className: \"h-3 rounded w-full bg-gray-200 dark:bg-neutral-600\"\n  }, mdx(\"div\", {\n    className: \"h-3 rounded bg-red-600\",\n    style: {\n      \"width\": \"100%\"\n    }\n  }))), mdx(\"h2\", null, \"Floating label Progress bar\"), mdx(\"p\", null, \"Floating label progress bar \"), mdx(\"div\", null, mdx(\"div\", {\n    className: \"inline-block mb-2 ms-[calc(25%-1.25rem)] py-0.5 px-1.5 bg-indigo-50 border border-indigo-200 text-xs font-medium text-indigo-600 rounded-lg dark:bg-indigo-800/30 dark:border-indigo-800 dark:text-indigo-500\"\n  }, \"25%\"), mdx(\"div\", {\n    className: \"flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700\"\n  }, mdx(\"div\", {\n    className: \"flex flex-col justify-center rounded-full overflow-hidden bg-indigo-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-indigo-500\",\n    style: {\n      \"width\": \"25%\"\n    }\n  }))), mdx(\"div\", null, mdx(\"div\", {\n    className: \"inline-block mb-2 ms-[calc(50%-1.25rem)] py-0.5 px-1.5 bg-indigo-50 border border-indigo-200 text-xs font-medium text-indigo-600 rounded-lg dark:bg-indigo-800/30 dark:border-indigo-800 dark:text-indigo-500\"\n  }, \"50%\"), mdx(\"div\", {\n    className: \"flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700\"\n  }, mdx(\"div\", {\n    className: \"flex flex-col justify-center rounded-full overflow-hidden bg-indigo-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-indigo-500\",\n    style: {\n      \"width\": \"50%\"\n    }\n  }))), mdx(\"div\", null, mdx(\"div\", {\n    className: \"inline-block mb-2 ms-[calc(75%-1.25rem)] py-0.5 px-1.5 bg-indigo-50 border border-indigo-200 text-xs font-medium text-indigo-600 rounded-lg dark:bg-indigo-800/30 dark:border-indigo-800 dark:text-indigo-500\"\n  }, \"75%\"), mdx(\"div\", {\n    className: \"flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700\"\n  }, mdx(\"div\", {\n    className: \"flex flex-col justify-center rounded-full overflow-hidden bg-indigo-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-indigo-500\",\n    style: {\n      \"width\": \"75%\"\n    }\n  }))), mdx(\"div\", null, mdx(\"div\", {\n    className: \"inline-block mb-2 ms-[calc(100%-1.25rem)] py-0.5 px-1.5 bg-blue-50 border border-blue-200 text-xs font-medium text-indigo-600 rounded-lg dark:bg-indigo-800/30 dark:border-indigo-800 dark:text-indigo-500\"\n  }, \"100%\"), mdx(\"div\", {\n    className: \"flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700\"\n  }, mdx(\"div\", {\n    className: \"flex flex-col justify-center rounded-full overflow-hidden bg-indigo-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-indigo-500\",\n    style: {\n      \"width\": \"100%\"\n    }\n  }))), mdx(\"h2\", null, \"Vertical progress Bar\"), mdx(\"p\", null, \"This shows a vertical Tailwind progress bar. \"), mdx(\"div\", {\n    className: \"flex justify-center gap-5 m-10 items-center\"\n  }, mdx(\"div\", {\n    className: \"flex flex-col flex-nowrap justify-end w-2 h-32 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700\",\n    role: \"progressbar\",\n    \"aria-valuenow\": \"17\",\n    \"aria-valuemin\": \"0\",\n    \"aria-valuemax\": \"100\"\n  }, mdx(\"div\", {\n    className: \"rounded-full overflow-hidden bg-indigo-600\",\n    style: {\n      \"height\": \"17%\"\n    }\n  })), mdx(\"div\", {\n    className: \"flex flex-col flex-nowrap justify-end w-2 h-32 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700\"\n  }, mdx(\"div\", {\n    className: \"rounded-full overflow-hidden bg-indigo-600\",\n    style: {\n      \"height\": \"25%\"\n    }\n  })), mdx(\"div\", {\n    className: \"flex flex-col flex-nowrap justify-end w-2 h-32 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700\"\n  }, mdx(\"div\", {\n    className: \"rounded-full overflow-hidden bg-indigo-600\",\n    style: {\n      \"height\": \"50%\"\n    }\n  })), mdx(\"div\", {\n    className: \"flex flex-col flex-nowrap justify-end w-2 h-32 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700\"\n  }, mdx(\"div\", {\n    className: \"rounded-full overflow-hidden bg-indigo-600\",\n    style: {\n      \"height\": \"75%\"\n    }\n  })), mdx(\"div\", {\n    className: \"flex flex-col flex-nowrap justify-end w-2 h-32 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700\"\n  }, mdx(\"div\", {\n    className: \"rounded-full overflow-hidden bg-indigo-600\",\n    style: {\n      \"height\": \"90%\"\n    }\n  }))), mdx(\"h2\", null, \"Circular Progress bar\"), mdx(\"p\", null, \"Circular Progress bar without label and with label\"), mdx(\"div\", {\n    className: \"m-10\"\n  }, mdx(\"div\", {\n    className: \"relative h-40 w-40\"\n  }, mdx(\"svg\", {\n    className: \"h-full w-full\",\n    width: \"36\",\n    height: \"36\",\n    viewBox: \"0 0 36 36\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, mdx(\"circle\", {\n    cx: \"18\",\n    cy: \"18\",\n    r: \"16\",\n    fill: \"none\",\n    className: \"stroke-current text-gray-200 dark:text-gray-700\",\n    strokeWidth: \"2\"\n  }), mdx(\"g\", {\n    className: \"origin-center -rotate-90 transform\"\n  }, mdx(\"circle\", {\n    cx: \"18\",\n    cy: \"18\",\n    r: \"16\",\n    fill: \"none\",\n    className: \"stroke-current text-indigo-600 dark:text-blue-500\",\n    strokeWidth: \"2\",\n    strokeDasharray: \"100\",\n    strokeDashoffset: \"50\"\n  }))))), mdx(\"div\", {\n    className: \"relative h-40 w-40\"\n  }, mdx(\"svg\", {\n    className: \"h-full w-full\",\n    width: \"36\",\n    height: \"36\",\n    viewBox: \"0 0 36 36\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, mdx(\"circle\", {\n    cx: \"18\",\n    cy: \"18\",\n    r: \"16\",\n    fill: \"none\",\n    className: \"stroke-current text-gray-200 dark:text-gray-700\",\n    strokeWidth: \"2\"\n  }), mdx(\"g\", {\n    className: \"origin-center -rotate-90 transform\"\n  }, \" \", mdx(\"circle\", {\n    cx: \"18\",\n    cy: \"18\",\n    r: \"16\",\n    fill: \"none\",\n    className: \"stroke-current text-indigo-600 dark:text-blue-500\",\n    strokeWidth: \"2\",\n    strokeDasharray: \"100\",\n    strokeDashoffset: \"50\"\n  }))), mdx(\"div\", {\n    className: \"absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2\"\n  }, mdx(\"span\", {\n    className: \"text-center text-2xl font-bold text-gray-800 dark:text-white\"\n  }, \"50%\"))), mdx(\"h2\", null, \"Conclusion\"), mdx(\"p\", null, \"Congratulations! You have successfully built a Tailwind progress bar. In this tutorial, we covered the steps of setting up the HTML structure, applying Tailwind CSS utility classes, making the progress bar responsive, adding animation and displaying different variant of Tailwind progress bar. \"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"How to build Tailwind Progress Bar.","date":"January 10, 2024","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACKUlEQVQoz2OwT5tkF9NXPW/7nNMXJ+w6kdayzCNlkopbg7ZPk7Z3k5ZXIwQB2ZiIYcqjR9nL9hgHtgUXzA7ImGYU1K7v1xyX2qsH1OndpB/YahDYZhDQpuPTrA0W0ULWPG/z7tWHTvsk9hv6txYt2lm++bBFeOfkpVutoro1PBqAZukFtOoHtOn6NAO16fk26/ogaXYIbrHxbwoomdN/4dr89y8rth018G/pWH/QNrZXy6MhJaM3Ia0nPLErOrk7KqU7J6fPM7pdzaNRB2wEg4ZPs7JDddasrTNePmvecbRyyqqwrEluwa1Af+r7Niem96Rn9SWn9wJN8YruAGrQA7sfajPQSzXdiyes2Vk0d3NA2RyXwtlLpy3aPW0e0JNAzZnZfamZvWmZvdk5vSEJXUCGc3ibpmeTDkSzaVT3uh27p/UvTCycvmTuyrqyyclpfe5RnRpeTUDvWQa3Oka0O0e0O4a324a1e8Z2WoW0afu26PiC7Gewi+pev2JDdvkMPe/m1oopsam9ii71au71ukBpn2bT6B7T6F7TmF7j6B7jyG694A7DkA6T8C6ge4H+YrAPa/+8Zf2ExlnSLvVyQORc6542efq6I0G5M1Xc6gyD241gSM+/BehakIO9wAhoMxCnZfa4RLSpuNUHZEyZPHXzid1nr378FFsyX8m5VgeSTjxBCEsiAWIl90ZN72YVp5q2mVv/Xr1/79i141cemga3a3pCowQXAgB72BBx5aqmsQAAAABJRU5ErkJggg==","aspectRatio":1.7730496453900708,"src":"/static/225ee6a3e624fac47e73e1df4ecbf23e/30425/how-build-tailwind-progress-bar.png","srcSet":"/static/225ee6a3e624fac47e73e1df4ecbf23e/84249/how-build-tailwind-progress-bar.png 250w,\n/static/225ee6a3e624fac47e73e1df4ecbf23e/9d7e9/how-build-tailwind-progress-bar.png 500w,\n/static/225ee6a3e624fac47e73e1df4ecbf23e/30425/how-build-tailwind-progress-bar.png 1000w,\n/static/225ee6a3e624fac47e73e1df4ecbf23e/4c84e/how-build-tailwind-progress-bar.png 1440w","sizes":"(max-width: 1000px) 100vw, 1000px"}}},"imageExternal":null,"lastUpdated":"19 May 2024","author":"Emmanuel Chinonso","role":"Technical Writer/Web Developer","authorImage":"/blog/author/author_emmanuel.jpg","metaTitle":"Tailwind CSS Progress Bar","metaDescription":" In this tutorial, we will walk you through the process of building a Tailwind progress bar. Tailwind CSS is a popular utility-first CSS framework that allows you to quickly and easily create custom UI components. With its extensive set of utility classes, creating a progress bar becomes a breeze.","previousTitle":" How to add tailwind CSS colors and Fonts to your project","previousPath":"how-to-add-tailwind-css-colors-and-fonts-to-your-project","nextTitle":"How to create a Beautiful Responsive Navigation bar Using Tailwind CSS","nextPath":"how-to-create-a-beautiful-responsive-navbar-using-tailwind-css","blogtype":"tailwindcss"},"fields":{"slug":"/how-to-build-tailwindcss-progressbar/"}},"previous":null,"next":null},"pageContext":{"id":"e867cd05-ea44-51ed-b938-4e8bdee5067a"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3706406642","3706406642","4045616534","4045616534","956403285","956403285"]}