Back to neobrutalism components
Progress Bars
Neobrutalism-style progress bar components built with Tailwind CSS. Featuring thick borders, hard shadows, and bold fill patterns. Perfect for loading states, completion tracking, and status indicators with a retro flair.
3/3 Dark Mode Updated: Jul 4, 2026
<div
role="progressbar"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Progress"
>
<div class="w-full border-2 border-black bg-white p-1 shadow-[2px_2px_0_0] shadow-black">
<div class="h-3 bg-black" style="width: 25%"></div>
</div>
</div><div
role="progressbar"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Progress"
>
<div
class="w-full border-2 border-black bg-white p-1 shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-gray-900 dark:shadow-white"
>
<div class="h-3 bg-black dark:bg-white" style="width: 25%"></div>
</div>
</div><div
role="progressbar"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Progress"
>
<div class="w-full border-2 border-black bg-white p-1 shadow-[2px_2px_0_0] shadow-black">
<div
class="h-3 bg-[repeating-linear-gradient(45deg,var(--tw-gradient-from)_0,var(--tw-gradient-from)_10px,var(--tw-gradient-to)_10px,var(--tw-gradient-to)_20px)] from-yellow-400 to-yellow-500"
style="width: 25%"
></div>
</div>
</div><div
role="progressbar"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Progress"
>
<div
class="w-full border-2 border-black bg-white p-1 shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-gray-900 dark:shadow-white"
>
<div
class="h-3 bg-[repeating-linear-gradient(45deg,var(--tw-gradient-from)_0,var(--tw-gradient-from)_10px,var(--tw-gradient-to)_10px,var(--tw-gradient-to)_20px)] from-yellow-400 to-yellow-500 dark:from-yellow-500 dark:to-yellow-400"
style="width: 25%"
></div>
</div>
</div><div
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
aria-labelledby="UpdatingLabel"
>
<div class="flex justify-between gap-4 text-black">
<span id="UpdatingLabel" class="text-sm font-semibold">Updating</span>
<span class="text-sm font-semibold">75%</span>
</div>
<div class="mt-2 w-full border-2 border-black bg-white p-1 shadow-[2px_2px_0_0] shadow-black">
<div class="h-3 bg-green-600" style="width: 75%"></div>
</div>
</div><div
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
aria-labelledby="UpdatingLabel"
>
<div class="flex justify-between gap-4 text-black dark:text-white">
<span id="UpdatingLabel" class="text-sm font-semibold">Updating</span>
<span class="text-sm font-semibold">75%</span>
</div>
<div
class="mt-2 w-full border-2 border-black bg-white p-1 shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-gray-900 dark:shadow-white"
>
<div class="h-3 bg-green-600 dark:bg-green-300" style="width: 75%"></div>
</div>
</div>