Components Progress Bar Progress Bar Component

Progress Bar Component

A responsive progress bar component designed with dark mode in mind, using Tailwind CSS.

Preview

HTML Code

<div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="w-full max-w-md">
    <h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
    <div class="relative pt-1">
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
          70%
        </span>
        <span class="text-xs font-semibold inline-block text-gray-400">
          7/10
        </span>
      </div>
      <div class="h-2 bg-gray-700 rounded">
        <div class="h-full bg-teal-500 rounded" style="width: 70%;"></div>
      </div>
    </div>
    <p class="text-gray-400 text-sm mt-2">Loading...</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.

Open

Progress Bar

Progress Bar Component with Microinteractions design. Includes responsive effects and dark theme support using only HTML and CSS (Tailwind CSS).

Open

Progress Bar

A responsive progress bar component with dark mode support for e-commerce, featuring a vibrant color scheme and a simple layout.

Open