Progress Bars
Ready to use Tailwind CSS progress bar components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
Progress bars are useful for a few different things, upload progress, onboarding steps, skill levels on a profile, loading states. We have simple horizontal bars in various colors and sizes, striped variants, stacked multi-section bars, and circular/radial progress. They're all just HTML and Tailwind, the width of the fill bar is set inline or via a class so it's easy to drive from JavaScript or your backend.
Tailwind
<nav aria-label="Progress">
<ol role="list" class="flex items-center gap-x-4 sm:gap-x-8">
<li>
<a href="#" class="flex size-8 items-center justify-center rounded-full bg-pink-500 hover:bg-pink-600">
<svg aria-hidden="true" class="size-4 text-white" viewBox="0 0 183 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68.1014 192C62.1366 192 56.4872 189.216 52.8672 184.415L3.87368 119.664C2.35894 117.664 1.25309 115.386 0.619333 112.958C-0.0144202 110.531 -0.163642 108.002 0.180196 105.517C0.524035 103.032 1.35419 100.639 2.62321 98.4748C3.89222 96.3108 5.57521 94.4181 7.57596 92.905C9.576 91.3857 11.8561 90.2761 14.2857 89.6398C16.7153 89.0035 19.2465 88.853 21.7343 89.197C24.2221 89.5411 26.6176 90.3728 28.7834 91.6446C30.9493 92.9163 32.8429 94.6031 34.3558 96.6082L66.5931 139.181L147.646 8.99321C150.334 4.69475 154.616 1.6382 159.555 0.494002C164.493 -0.650192 169.683 0.211401 173.987 2.88979C182.941 8.45831 185.697 20.2537 180.102 29.2237L84.3366 182.975C82.7018 185.612 80.4485 187.809 77.7722 189.377C75.0959 190.945 72.0775 191.836 68.979 191.973C68.6773 192 68.4031 192 68.1014 192Z" fill="currentColor" />
</svg>
<span class="sr-only">Step 1</span>
</a>
</li>
<li>
<a href="#" class="flex size-8 items-center justify-center rounded-full bg-pink-500 hover:bg-pink-600">
<svg aria-hidden="true" class="size-4 text-white" viewBox="0 0 183 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68.1014 192C62.1366 192 56.4872 189.216 52.8672 184.415L3.87368 119.664C2.35894 117.664 1.25309 115.386 0.619333 112.958C-0.0144202 110.531 -0.163642 108.002 0.180196 105.517C0.524035 103.032 1.35419 100.639 2.62321 98.4748C3.89222 96.3108 5.57521 94.4181 7.57596 92.905C9.576 91.3857 11.8561 90.2761 14.2857 89.6398C16.7153 89.0035 19.2465 88.853 21.7343 89.197C24.2221 89.5411 26.6176 90.3728 28.7834 91.6446C30.9493 92.9163 32.8429 94.6031 34.3558 96.6082L66.5931 139.181L147.646 8.99321C150.334 4.69475 154.616 1.6382 159.555 0.494002C164.493 -0.650192 169.683 0.211401 173.987 2.88979C182.941 8.45831 185.697 20.2537 180.102 29.2237L84.3366 182.975C82.7018 185.612 80.4485 187.809 77.7722 189.377C75.0959 190.945 72.0775 191.836 68.979 191.973C68.6773 192 68.4031 192 68.1014 192Z" fill="currentColor" />
</svg>
<span class="sr-only">Step 2</span>
</a>
</li>
<li>
<a href="#" aria-current="step" class="flex size-8 items-center justify-center rounded-full bg-pink-500 ring-2 ring-pink-400 ring-offset-2">
<span aria-hidden="true" class="size-2.5 rounded-full bg-white"></span>
<span class="sr-only">Step 3</span>
</a>
</li>
<li>
<a href="#" class="group flex size-8 items-center justify-center rounded-full bg-white ring-2 ring-inset ring-gray-300 hover:ring-gray-400">
<span aria-hidden="true" class="size-2.5 rounded-full bg-white group-hover:bg-gray-300"></span>
<span class="sr-only">Step 4</span>
</a>
</li>
<li>
<a href="#" class="group flex size-8 items-center justify-center rounded-full bg-white ring-2 ring-inset ring-gray-300 hover:ring-gray-400">
<span aria-hidden="true" class="size-2.5 rounded-full bg-white group-hover:bg-gray-300"></span>
<span class="sr-only">Step 5</span>
</a>
</li>
</ol>
</nav><nav aria-label="Progress">
<ol role="list" class="flex items-center">
<li class="relative isolate pr-8 sm:pr-20">
<div aria-hidden="true" class="absolute top-1/2 -z-10 w-full -translate-y-1/2">
<div class="h-0.5 w-full bg-pink-500"></div>
</div>
<a href="#" class="flex size-8 items-center justify-center rounded-full bg-pink-500 hover:bg-pink-600">
<svg aria-hidden="true" class="size-4 text-white" viewBox="0 0 183 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68.1014 192C62.1366 192 56.4872 189.216 52.8672 184.415L3.87368 119.664C2.35894 117.664 1.25309 115.386 0.619333 112.958C-0.0144202 110.531 -0.163642 108.002 0.180196 105.517C0.524035 103.032 1.35419 100.639 2.62321 98.4748C3.89222 96.3108 5.57521 94.4181 7.57596 92.905C9.576 91.3857 11.8561 90.2761 14.2857 89.6398C16.7153 89.0035 19.2465 88.853 21.7343 89.197C24.2221 89.5411 26.6176 90.3728 28.7834 91.6446C30.9493 92.9163 32.8429 94.6031 34.3558 96.6082L66.5931 139.181L147.646 8.99321C150.334 4.69475 154.616 1.6382 159.555 0.494002C164.493 -0.650192 169.683 0.211401 173.987 2.88979C182.941 8.45831 185.697 20.2537 180.102 29.2237L84.3366 182.975C82.7018 185.612 80.4485 187.809 77.7722 189.377C75.0959 190.945 72.0775 191.836 68.979 191.973C68.6773 192 68.4031 192 68.1014 192Z" fill="currentColor" />
</svg>
<span class="sr-only">Step 1</span>
</a>
</li>
<li class="relative isolate pr-8 sm:pr-20">
<div aria-hidden="true" class="absolute top-1/2 -z-10 w-full -translate-y-1/2">
<div class="h-0.5 w-full bg-pink-500"></div>
</div>
<a href="#" class="flex size-8 items-center justify-center rounded-full bg-pink-500 hover:bg-pink-600">
<svg aria-hidden="true" class="size-4 text-white" viewBox="0 0 183 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68.1014 192C62.1366 192 56.4872 189.216 52.8672 184.415L3.87368 119.664C2.35894 117.664 1.25309 115.386 0.619333 112.958C-0.0144202 110.531 -0.163642 108.002 0.180196 105.517C0.524035 103.032 1.35419 100.639 2.62321 98.4748C3.89222 96.3108 5.57521 94.4181 7.57596 92.905C9.576 91.3857 11.8561 90.2761 14.2857 89.6398C16.7153 89.0035 19.2465 88.853 21.7343 89.197C24.2221 89.5411 26.6176 90.3728 28.7834 91.6446C30.9493 92.9163 32.8429 94.6031 34.3558 96.6082L66.5931 139.181L147.646 8.99321C150.334 4.69475 154.616 1.6382 159.555 0.494002C164.493 -0.650192 169.683 0.211401 173.987 2.88979C182.941 8.45831 185.697 20.2537 180.102 29.2237L84.3366 182.975C82.7018 185.612 80.4485 187.809 77.7722 189.377C75.0959 190.945 72.0775 191.836 68.979 191.973C68.6773 192 68.4031 192 68.1014 192Z" fill="currentColor" />
</svg>
<span class="sr-only">Step 2</span>
</a>
</li>
<li class="relative isolate pr-8 sm:pr-20">
<div aria-hidden="true" class="absolute top-1/2 -z-10 w-full -translate-y-1/2">
<div class="h-0.5 w-full bg-gray-200"></div>
</div>
<a href="#" aria-current="step" class="flex size-8 items-center justify-center rounded-full bg-pink-500 ring-2 ring-pink-400 ring-offset-2">
<span aria-hidden="true" class="size-2.5 rounded-full bg-white"></span>
<span class="sr-only">Step 3</span>
</a>
</li>
<li class="relative isolate pr-8 sm:pr-20">
<div aria-hidden="true" class="absolute top-1/2 -z-10 w-full -translate-y-1/2">
<div class="h-0.5 w-full bg-gray-200"></div>
</div>
<a href="#" class="group flex size-8 items-center justify-center rounded-full bg-white ring-2 ring-inset ring-gray-300 hover:ring-gray-400">
<span aria-hidden="true" class="size-2.5 rounded-full bg-white group-hover:bg-gray-300"></span>
<span class="sr-only">Step 4</span>
</a>
</li>
<li class="relative">
<a href="#" class="group flex size-8 items-center justify-center rounded-full bg-white ring-2 ring-inset ring-gray-300 hover:ring-gray-400">
<span aria-hidden="true" class="size-2.5 rounded-full bg-white group-hover:bg-gray-300"></span>
<span class="sr-only">Step 5</span>
</a>
</li>
</ol>
</nav><nav class="" aria-label="Progress">
<ol role="list" class="grid grid-cols-1 gap-x-4 gap-y-5 md:grid-cols-4">
<li>
<a href="#" class="group flex flex-col border-l-4 border-pink-500 py-2 pl-4 text-sm hover:border-pink-600 md:border-l-0 md:border-t-4 md:pb-0 md:pl-0 md:pt-3">
<span class="text-gray-900 group-hover:text-pink-500">Step 1</span>
<span class="font-medium text-gray-900">Details</span>
</a>
</li>
<li>
<a href="#" aria-current="step" class="flex flex-col border-l-4 border-pink-500 py-2 pl-4 text-sm md:border-l-0 md:border-t-4 md:pb-0 md:pl-0 md:pt-3">
<span class="text-pink-500">Step 2</span>
<span class="font-medium text-gray-900">Payment</span>
</a>
</li>
<li>
<a href="#" class="group flex flex-col border-l-4 border-gray-200 py-2 pl-4 text-sm hover:border-gray-300 md:border-l-0 md:border-t-4 md:pb-0 md:pl-0 md:pt-3">
<span class="text-gray-500 group-hover:text-gray-700">Step 3</span>
<span class="font-semibold text-gray-900">Confirmation</span>
</a>
</li>
<li>
<a href="#" class="group flex flex-col border-l-4 border-gray-200 py-2 pl-4 text-sm hover:border-gray-300 md:border-l-0 md:border-t-4 md:pb-0 md:pl-0 md:pt-3">
<span class="text-gray-500 group-hover:text-gray-700">Step 4</span>
<span class="font-semibold text-gray-900">Complete</span>
</a>
</li>
</ol>
</nav><nav class="" aria-label="Progress">
<ol role="list" class="mx-auto flex w-full max-w-sm flex-col md:max-w-none md:flex-row">
<li class="relative isolate pb-8 md:flex-1 md:px-2 md:pb-0">
<div aria-hidden="true" class="absolute left-4 -z-10 h-full w-0.5 -translate-x-1/2 bg-pink-500 md:top-4 md:h-0.5 md:w-full md:-translate-y-1/2 md:translate-x-1/2"></div>
<a href="#" class="group flex gap-4 md:mx-auto md:max-w-xs md:flex-col md:items-center">
<span class="flex size-8 shrink-0 items-center justify-center rounded-full bg-pink-500 group-hover:bg-pink-600">
<svg aria-hidden="true" class="size-4 text-white" viewBox="0 0 183 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68.1014 192C62.1366 192 56.4872 189.216 52.8672 184.415L3.87368 119.664C2.35894 117.664 1.25309 115.386 0.619333 112.958C-0.0144202 110.531 -0.163642 108.002 0.180196 105.517C0.524035 103.032 1.35419 100.639 2.62321 98.4748C3.89222 96.3108 5.57521 94.4181 7.57596 92.905C9.576 91.3857 11.8561 90.2761 14.2857 89.6398C16.7153 89.0035 19.2465 88.853 21.7343 89.197C24.2221 89.5411 26.6176 90.3728 28.7834 91.6446C30.9493 92.9163 32.8429 94.6031 34.3558 96.6082L66.5931 139.181L147.646 8.99321C150.334 4.69475 154.616 1.6382 159.555 0.494002C164.493 -0.650192 169.683 0.211401 173.987 2.88979C182.941 8.45831 185.697 20.2537 180.102 29.2237L84.3366 182.975C82.7018 185.612 80.4485 187.809 77.7722 189.377C75.0959 190.945 72.0775 191.836 68.979 191.973C68.6773 192 68.4031 192 68.1014 192Z" fill="currentColor" />
</svg>
</span>
<span class="flex flex-col text-sm md:text-center">
<span class="font-semibold text-gray-900">Your details</span>
<span class="text-gray-500">Please enter your details</span>
</span>
</a>
</li>
<li class="relative isolate pb-8 md:flex-1 md:px-2 md:pb-0">
<div aria-hidden="true" class="absolute left-4 -z-10 h-full w-0.5 -translate-x-1/2 bg-gray-200 md:top-4 md:h-0.5 md:w-full md:-translate-y-1/2 md:translate-x-1/2"></div>
<a href="#" aria-current="step" class="flex gap-4 md:mx-auto md:max-w-xs md:flex-col md:items-center">
<span aria-hidden="true" class="flex size-8 shrink-0 items-center justify-center rounded-full bg-pink-500 ring-2 ring-pink-400 ring-offset-2">
<span class="size-2.5 rounded-full bg-white"></span>
</span>
<span class="flex flex-col text-sm md:text-center">
<span class="font-semibold text-gray-900">Payment</span>
<span class="text-gray-500">Please enter your payment details</span>
</span>
</a>
</li>
<li class="relative md:flex-1 md:px-2">
<a href="#" class="group flex gap-4 md:mx-auto md:max-w-xs md:flex-col md:items-center">
<span aria-hidden="true" class="flex size-8 shrink-0 items-center justify-center rounded-full bg-white ring-2 ring-inset ring-gray-300 group-hover:ring-gray-400">
<span class="size-2.5 rounded-full bg-white group-hover:bg-gray-300"></span>
</span>
<span class="flex flex-col text-sm md:text-center">
<span class="font-semibold text-gray-900">Confirmation</span>
<span class="text-gray-500">Please confirm your details</span>
</span>
</a>
</li>
</ol>
</nav><nav aria-label="Progress" class="flex flex-col items-center gap-x-7 gap-y-4 sm:flex-row">
<p class="text-sm font-medium text-gray-900">Step 3 of 5</p>
<ol role="list" class="flex items-center gap-x-4">
<li>
<a href="#" class="flex size-8 items-center justify-center rounded-full bg-pink-500 hover:bg-pink-600">
<svg aria-hidden="true" class="size-4 text-white" viewBox="0 0 183 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68.1014 192C62.1366 192 56.4872 189.216 52.8672 184.415L3.87368 119.664C2.35894 117.664 1.25309 115.386 0.619333 112.958C-0.0144202 110.531 -0.163642 108.002 0.180196 105.517C0.524035 103.032 1.35419 100.639 2.62321 98.4748C3.89222 96.3108 5.57521 94.4181 7.57596 92.905C9.576 91.3857 11.8561 90.2761 14.2857 89.6398C16.7153 89.0035 19.2465 88.853 21.7343 89.197C24.2221 89.5411 26.6176 90.3728 28.7834 91.6446C30.9493 92.9163 32.8429 94.6031 34.3558 96.6082L66.5931 139.181L147.646 8.99321C150.334 4.69475 154.616 1.6382 159.555 0.494002C164.493 -0.650192 169.683 0.211401 173.987 2.88979C182.941 8.45831 185.697 20.2537 180.102 29.2237L84.3366 182.975C82.7018 185.612 80.4485 187.809 77.7722 189.377C75.0959 190.945 72.0775 191.836 68.979 191.973C68.6773 192 68.4031 192 68.1014 192Z" fill="currentColor" />
</svg>
<span class="sr-only">Step 1</span>
</a>
</li>
<li>
<a href="#" class="flex size-8 items-center justify-center rounded-full bg-pink-500 hover:bg-pink-600">
<svg aria-hidden="true" class="size-4 text-white" viewBox="0 0 183 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68.1014 192C62.1366 192 56.4872 189.216 52.8672 184.415L3.87368 119.664C2.35894 117.664 1.25309 115.386 0.619333 112.958C-0.0144202 110.531 -0.163642 108.002 0.180196 105.517C0.524035 103.032 1.35419 100.639 2.62321 98.4748C3.89222 96.3108 5.57521 94.4181 7.57596 92.905C9.576 91.3857 11.8561 90.2761 14.2857 89.6398C16.7153 89.0035 19.2465 88.853 21.7343 89.197C24.2221 89.5411 26.6176 90.3728 28.7834 91.6446C30.9493 92.9163 32.8429 94.6031 34.3558 96.6082L66.5931 139.181L147.646 8.99321C150.334 4.69475 154.616 1.6382 159.555 0.494002C164.493 -0.650192 169.683 0.211401 173.987 2.88979C182.941 8.45831 185.697 20.2537 180.102 29.2237L84.3366 182.975C82.7018 185.612 80.4485 187.809 77.7722 189.377C75.0959 190.945 72.0775 191.836 68.979 191.973C68.6773 192 68.4031 192 68.1014 192Z" fill="currentColor" />
</svg>
<span class="sr-only">Step 2</span>
</a>
</li>
<li>
<a href="#" aria-current="step" class="flex size-8 items-center justify-center rounded-full bg-pink-500 ring-2 ring-pink-400 ring-offset-2">
<span aria-hidden="true" class="size-2.5 rounded-full bg-white"></span>
<span class="sr-only">Step 3</span>
</a>
</li>
<li>
<a href="#" class="group flex size-8 items-center justify-center rounded-full bg-white ring-2 ring-inset ring-gray-300 hover:ring-gray-400">
<span aria-hidden="true" class="size-2.5 rounded-full bg-white group-hover:bg-gray-300"></span>
<span class="sr-only">Step 4</span>
</a>
</li>
<li>
<a href="#" class="group flex size-8 items-center justify-center rounded-full bg-white ring-2 ring-inset ring-gray-300 hover:ring-gray-400">
<span aria-hidden="true" class="size-2.5 rounded-full bg-white group-hover:bg-gray-300"></span>
<span class="sr-only">Step 5</span>
</a>
</li>
</ol>
</nav><div class="bg-white py-12">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<nav class="" aria-label="Progress">
<ol role="list" class="mx-auto flex w-full max-w-sm flex-col md:max-w-none md:flex-row">
<li class="relative isolate pb-8 md:flex-1 md:px-2 md:pb-0">
<div aria-hidden="true" class="absolute left-5 -z-10 h-full w-0.5 -translate-x-1/2 bg-pink-500 md:top-5 md:h-0.5 md:w-full md:-translate-y-1/2 md:translate-x-1/2"></div>
<a href="#" class="group flex gap-4 md:mx-auto md:max-w-xs md:flex-col md:items-center">
<span class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-white shadow-sm ring-2 ring-inset ring-pink-500 group-hover:ring-pink-700">
<svg aria-hidden="true" class="size-5 text-pink-500 group-hover:text-pink-700" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" opacity="0" />
<path d="M12 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z" />
<path d="M12 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z" />
</svg>
</span>
<span class="flex flex-col text-sm md:text-center">
<span class="font-semibold text-gray-900">Your details</span>
<span class="text-gray-500">Please enter your details</span>
</span>
</a>
</li>
<li class="relative isolate pb-8 md:flex-1 md:px-2 md:pb-0">
<div aria-hidden="true" class="absolute left-5 -z-10 h-full w-0.5 -translate-x-1/2 bg-gray-200 md:top-5 md:h-0.5 md:w-full md:-translate-y-1/2 md:translate-x-1/2"></div>
<a href="#" aria-current="step" class="flex gap-4 md:mx-auto md:max-w-xs md:flex-col md:items-center">
<span class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-white shadow-sm ring-2 ring-inset ring-pink-500">
<svg aria-hidden="true" class="size-5 text-pink-500" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<rect x="48" y="96" width="416" height="320" rx="56" ry="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32px" />
<line x1="48" y1="192" x2="464" y2="192" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="60px" />
<rect x="128" y="300" width="48" height="20" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="60px" />
</svg>
</span>
<span class="flex flex-col text-sm md:text-center">
<span class="font-semibold text-gray-900">Payment</span>
<span class="text-gray-500">Please enter your payment details</span>
</span>
</a>
</li>
<li class="relative md:flex-1 md:px-2">
<a href="#" class="group flex gap-4 md:mx-auto md:max-w-xs md:flex-col md:items-center">
<span class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-white shadow-sm ring-2 ring-inset ring-gray-300 group-hover:ring-gray-400">
<svg aria-hidden="true" class="size-5 text-gray-300 group-hover:text-gray-400" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75px" d="M3,21.016l.78984-2.87249C5.0964,13.3918,8.5482,11.016,12,11.016" />
<circle fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="1.75px" cx="12" cy="5.98404" r="5" />
<circle fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75px" cx="17" cy="18" r="5" />
<polyline fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="rouund" stroke-width="1.75px" points="14.872 18.149 16.32 20.082 19.533 16.572" />
</svg>
</span>
<span class="flex flex-col text-sm md:text-center">
<span class="font-semibold text-gray-900">Confirmation</span>
<span class="text-gray-500">Please confirm your details</span>
</span>
</a>
</li>
</ol>
</nav>
</div>
</div><div>
<div class="text-sm flex justify-between gap-x-3">
<h4 class="text-gray-900">Storage</h4>
<p class="text-sm text-gray-500">62.8 GB of 100 GB used</p>
</div>
<div aria-hidden="true" class="mt-3 h-2 w-full overflow-hidden rounded-full bg-gray-200">
<div class="h-2 rounded-full bg-pink-500" style="width: 62.8%"></div>
</div>
</div><div class="relative mx-auto flex max-w-lg flex-col gap-y-1 rounded-xl bg-white p-4 ring-1 ring-inset ring-gray-200">
<div class="flex gap-x-3">
<div aria-hidden="true" class="relative size-10">
<svg class="size-10 text-gray-300" viewBox="0 0 534 668" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M300.334 34.029C297.15 34 293.577 34 289.49 34H140.34C103.003 34 84.321 34 70.0603 41.2663C57.516 47.6577 47.3247 57.849 40.9333 70.3933C33.667 84.654 33.667 103.336 33.667 140.673V527.34C33.667 564.677 33.667 583.337 40.9333 597.597C47.3247 610.14 57.516 620.35 70.0603 626.74C84.3073 634 102.967 634 140.232 634H393.77C431.034 634 449.667 634 463.914 626.74C476.457 620.35 486.684 610.14 493.074 597.597C500.334 583.35 500.334 564.717 500.334 527.453V244.856C500.334 240.765 500.334 237.187 500.304 234M300.334 34.029C309.854 34.1157 315.877 34.4617 321.627 35.842C328.43 37.475 334.93 40.1753 340.894 43.8307C347.62 47.9523 353.394 53.7273 364.917 65.25L469.1 169.433C480.63 180.963 486.364 186.712 490.487 193.44C494.14 199.405 496.844 205.909 498.477 212.711C499.857 218.459 500.21 224.484 500.304 234M300.334 34.029V127.333C300.334 164.67 300.334 183.326 307.6 197.586C313.99 210.131 324.184 220.349 336.727 226.741C350.974 234 369.634 234 406.897 234H500.304M500.304 234H500.34" stroke="currentColor" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="absolute bottom-2 left-0 rounded-sm bg-pink-500 px-[3px] py-0.5 text-[8px]/[10px] font-bold text-white">SVG</span>
</div>
<div class="text-sm">
<h4 class="sr-only">File details</h4>
<p class="font-medium text-gray-900">Logo.svg</p>
<p class="text-sm text-gray-500">3.6 MB</p>
</div>
</div>
<div class="flex items-center gap-x-3">
<div aria-hidden="true" class="h-2 w-full flex-1 overflow-hidden rounded-full bg-gray-200">
<div class="h-2 rounded-full bg-pink-500" style="width: 80%"></div>
</div>
<div class="w-10 shrink-0">
<h4 class="sr-only">Uploaded</h4>
<p class="text-right text-sm font-medium text-gray-900">80%</p>
</div>
<div class="absolute right-4 top-4">
<button type="button" class="relative -mr-[5px] flex h-4 w-4 items-center justify-center text-gray-400 hover:text-gray-500">
<span class="sr-only">Cancel</span>
<svg class="size-4" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
</svg>
<span class="absolute -inset-2"></span>
</button>
</div>
</div>
</div>Frequently asked questions
-
Simple filled bars, striped bars, different colors and sizes, labeled bars with a percentage, stacked multi-value bars, and a circular/radial progress variant.
-
The fill div has a width style like style="width: 65%" or a Tailwind class like w-2/3. Drive it dynamically however you like, JavaScript, a template variable, anything.
-
Yes. Tailwind has a transition-all class that animates width changes. Add it to the fill element and it'll animate smoothly whenever the width value changes.
-
No. They're all just HTML and CSS. JavaScript is only needed if you want to animate or update the value dynamically.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.