Components Progress Bar Progress Bar

Progress Bar

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

Preview

HTML Code

<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
  <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%; animation: progress-animation 2s infinite;"></div>
</div>

<style>
@keyframes progress-animation {
  0% { width: 0%; }
  100% { width: 45%; }
}

.dark .bg-blue-600 {
  background-color: #90cdf4; /* Lighter blue for dark mode */
}

/* Responsive considerations */
@media (max-width: 768px) {
  @keyframes progress-animation {
    0% { width: 0%; }
    100% { width: 60%; } /* Wider progress on smaller screens */
  }
  .bg-blue-600 {
    animation: progress-animation 2s infinite; /* Apply animation again for clarity */
  }
}
</style>

Related Components

Neumorphic Progress Bar

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

Open

Neumorphism Progress Bar

A responsive neumorphism-styled progress bar component designed for dashboards, incorporating an interactive feature and supporting dark mode.

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