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

Neumorphic Progress Bar

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

Open

Progress Bar Component

A responsive progress bar component designed with 3D elements, using an analogous color scheme suitable for e-commerce, featuring dark mode support

Open

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