Tailwind CSS Progress

Our Tailwind CSS progress component can be used to show a user how far along he is in a process. The progress can be determinate or indeterminate. Use the Progress Bar to show an ongoing process that takes a noticeable time to finish.

Below we are presenting our examples of progress components that you can use in your Tailwind CSS project. They come in different styles so you can adapt them easily to your needs.

<div class="flex-start flex h-1.5 w-full overflow-hidden rounded-sm bg-blue-gray-50 font-sans text-xs font-medium">
  <div
    class="flex h-full items-baseline justify-center overflow-hidden break-all bg-pink-500 text-white"
    style="width: 50%;"
  ></div>
</div>

Progress Bar Variants

Below there are 2 different variants of a progress that you can use simple and gradient.

<div class="flex w-full flex-col gap-4">
  <div class="flex-start flex h-1.5 w-full overflow-hidden rounded-sm bg-blue-gray-50 font-sans text-xs font-medium">
    <div
      class="flex h-full items-baseline justify-center overflow-hidden break-all bg-pink-500 text-white"
      style="width: 50%;"
    ></div>
  </div>
  <div class="flex-start flex h-1.5 w-full overflow-hidden rounded-sm bg-blue-gray-50 font-sans text-xs font-medium">
    <div
      class="flex h-full items-baseline justify-center overflow-hidden break-all bg-gradient-to-tr from-pink-600 to-pink-400 text-white"
      style="width: 50%;"
    ></div>
  </div>
</div>

Progress Bar Colors

<div class="flex w-full flex-col gap-4">
  <div class="flex-start flex h-1.5 w-full overflow-hidden rounded-sm bg-blue-gray-50 font-sans text-xs font-medium">
    <div
      class="flex h-full items-baseline justify-center overflow-hidden break-all bg-blue-500 text-white"
      style="width: 50%;"
    ></div>
  </div>
  <div class="flex-start flex h-1.5 w-full overflow-hidden rounded-sm bg-blue-gray-50 font-sans text-xs font-medium">
    <div
      class="flex h-full items-baseline justify-center overflow-hidden break-all bg-red-500 text-white"
      style="width: 50%;"
    ></div>
  </div>
  <div class="flex-start flex h-1.5 w-full overflow-hidden rounded-sm bg-blue-gray-50 font-sans text-xs font-medium">
    <div
      class="flex h-full items-baseline justify-center overflow-hidden break-all bg-green-500 text-white"
      style="width: 50%;"
    ></div>
  </div>
  <div class="flex-start flex h-1.5 w-full overflow-hidden rounded-sm bg-blue-gray-50 font-sans text-xs font-medium">
    <div
      class="flex h-full items-baseline justify-center overflow-hidden break-all bg-amber-500 text-black"
      style="width: 50%;"
    ></div>
  </div>
  <div class="flex-start flex h-1.5 w-full overflow-hidden rounded-sm bg-blue-gray-50 font-sans text-xs font-medium">
    <div
      class="flex h-full items-baseline justify-center overflow-hidden break-all bg-teal-500 text-white"
      style="width: 50%;"
    ></div>
  </div>
  <div class="flex-start flex h-1.5 w-full overflow-hidden rounded-sm bg-blue-gray-50 font-sans text-xs font-medium">
    <div
      class="flex h-full items-baseline justify-center overflow-hidden break-all bg-indigo-500 text-white"
      style="width: 50%;"
    ></div>
  </div>
  <div class="flex-start flex h-1.5 w-full overflow-hidden rounded-sm bg-blue-gray-50 font-sans text-xs font-medium">
    <div
      class="flex h-full items-baseline justify-center overflow-hidden break-all bg-purple-500 text-white"
      style="width: 50%;"
    ></div>
  </div>
  <div class="flex-start flex h-1.5 w-full overflow-hidden rounded-sm bg-blue-gray-50 font-sans text-xs font-medium">
    <div
      class="flex h-full items-baseline justify-center overflow-hidden break-all bg-pink-500 text-white"
      style="width: 50%;"
    ></div>
  </div>
  <div class="flex-start flex h-1.5 w-full overflow-hidden rounded-sm bg-blue-gray-50 font-sans text-xs font-medium">
    <div
      class="flex h-full items-baseline justify-center overflow-hidden break-all bg-blue-500 text-white"
      style="width: 50%;"
    ></div>
  </div>
</div>

Progress Bar with Label

50% Completed

<div class="flex-start flex h-4 w-full overflow-hidden rounded bg-blue-gray-50 font-sans text-xs font-medium">
  <div
    class="flex h-full items-baseline justify-center overflow-hidden break-all bg-pink-500 text-white"
    style="width: 50%"
  >
    50% Completed
  </div>
</div>

popover

radio button

Edit this page on Github