Progress Bar Component
A simple progress bar component styled in a brutalism design with a grayscale color scheme for e-commerce applications. It is responsive and features dark mode support.
HTML Code
<div class="w-full max-w-md mx-auto p-4">
<h2 class="text-white text-xl font-bold mb-2">Loading Your Items...</h2>
<div class="bg-gray-300 dark:bg-gray-700 rounded-full h-6">
<div class="bg-black dark:bg-white h-6 rounded-full" style="width: 70%;"></div>
</div>
<div class="flex justify-between mt-2">
<span class="text-gray-500 dark:text-gray-300 text-sm">0%</span>
<span class="text-gray-500 dark:text-gray-300 text-sm">70%</span>
</div>
</div>Related Components
3D Grayscale Sports Fitness Progress Bar
A complex, 3D grayscale progress bar component designed for sports and fitness applications, showing training progress with depth and visual engagement. It includes dark mode support and is fully responsive.
Progress Bar Component
A simple progress bar component styled with glassmorphism and monochromatic colors, suitable for business and corporate websites, with support for dark mode.
Organic_Nature_ProgressBar
A nature-inspired, retro-themed progress bar component for industrial and manufacturing applications, featuring flowing lines, muted colors, and dark mode support.