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
3D Progress Bar Component
A responsive progress bar component designed for social networking interfaces, featuring a 3D effect, monochromatic color scheme, and dark mode support, built using Tailwind CSS.
Neumorphism Progress Bar
Progress Bar Component with Neumorphism design, responsive effects, and dark theme support using Tailwind CSS
Progress Bar Component
A responsive progress bar component designed for dark mode with a pastel color scheme, suitable for business/corporate websites.