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.
HTML Code
<div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 bg-opacity-30 backdrop-blur-md border border-gray-500 rounded-lg p-6 shadow-lg w-1/2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Progress</h2>
<div class="relative w-full h-4 rounded-full bg-gray-300 dark:bg-gray-600">
<div class="absolute top-0 left-0 h-4 rounded-full bg-blue-500" style="width: 70%;"></div>
</div>
<span class="text-base text-gray-800 dark:text-gray-200 mt-2">70%</span>
</div>
</div>Related Components
E-commerce Professional Progress Bar
A complex, responsive progress bar component designed for e-commerce, featuring an autumn color scheme (rich oranges, browns, burgundies) and supporting dark mode. It provides a clean, professional look for corporate environments.
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.
Brutalist_ProgressBar
A high-contrast, brutalist-style progress bar component suitable for marketplace platforms, featuring bold colors and simple layout, with full responsiveness and dark mode support.