Components Progress Bar Glassmorphism Progress Bar

Glassmorphism Progress Bar

Glassmorphism-style progress bar designed for social media interfaces, featuring vibrant colors and dark mode support. Simple layout with no JavaScript.

Preview

HTML Code

<div class="w-full bg-gray-200 bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-full h-4 dark:bg-gray-700 dark:bg-opacity-20 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 h-4 rounded-full" style="width: 75%;"></div>
</div>

Related Components

Brutalist_ProgressBar

A high-contrast, brutalist-style progress bar component suitable for marketplace platforms, featuring bold colors and simple layout, with full responsiveness and dark mode support.

Open

Progress Bar

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

Open

Material Design Earthy Progress Bar

A Material Design-inspired progress bar with earth tones, suitable for social media interfaces. It is responsive and includes dark mode support using Tailwind CSS.

Open