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.
HTML Code
<div class="dark:bg-gray-900 p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Reading Progress</h2>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
<div class="dark:bg-purple-500 h-2.5 rounded-full" style="width: 45%;"></div>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
<div class="dark:bg-yellow-500 h-2.5 rounded-full" style="width: 60%;"></div>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div class="dark:bg-emerald-500 h-2.5 rounded-full" style="width: 75%;"></div>
</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.
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.
Minimalist Triadic Progress Bar
A minimalist, responsive progress bar with triadic color scheme and dark theme support, suitable for social media applications.