Components Progress Bar Triadic Dark Mode Progress Bar

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.

Preview

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

Minimalist Progress Bar

A minimalist and flat design progress bar component with pastel colors, suitable for professional business or corporate websites. It has a responsive design and supports dark mode using Tailwind CSS.

Open

Neumorphism Progress Bar

A Neumorphism-styled progress bar for portfolios, featuring a pastel color scheme, moderate complexity, responsiveness, and dark theme support. No JavaScript is included; the component is built with HTML and Tailwind CSS.

Open

Neumorphic Progress Bar

A responsive progress bar component designed with Neumorphism style, supporting both light and dark themes using Tailwind CSS.

Open