Progress Bar Component
A responsive progress bar component designed with 3D elements, using an analogous color scheme suitable for e-commerce, featuring dark mode support
HTML Code
<div class="max-w-md mx-auto p-4">
<div class="relative h-8 bg-gray-300 rounded-md overflow-hidden dark:bg-gray-700">
<div class="absolute inset-0 transition-all duration-300 ease-out bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600" style="width: 70%;"></div>
<div class="absolute inset-0 flex items-center justify-center text-white font-semibold">
70%
</div>
</div>
<div class="mt-4 text-gray-700 dark:text-gray-300">
<p class="text-sm">Progress towards your shopping goals.</p>
</div>
</div>Related Components
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.
Triadic Dark Mode Progress Bar
A simple and triadic-colored progress bar component for dark mode, suitable for blogs and content consumption. It features a responsive design with Tailwind CSS, utilizing the dark: prefix for dark theme support without JavaScript.
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.