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

Neumorphic Progress Bar

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

Open

Dark Mode Progress Bar

A responsive progress bar component designed for dark mode using Tailwind CSS, featuring a sleek design and dark theme support.

Open

Organic_Nature_ProgressBar

A nature-inspired, retro-themed progress bar component for industrial and manufacturing applications, featuring flowing lines, muted colors, and dark mode support.

Open