Components Progress Indicators 3D Progress Bar Component

3D Progress Bar Component

Styled with 3D effects, Tailwind CSS, responsive design, and dark mode support.

Preview

HTML Code

<div class='relative pt-1 dark:bg-gray-800'>
  <div class='overflow-hidden h-2 text-xs flex rounded bg-gray-200 dark:bg-gray-700'>
    <div style='width: 45%' class='shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500 dark:bg-blue-400'></div>
  </div>
  <div class='mt-2 text-right text-xs dark:text-gray-400'>45% Complete</div>
</div>

Related Components

Progress Indicators Component

A responsive Progress Indicator Component with Brutalism design, earthy color tones, and dark theme support, suitable for a blog or content site.

Open

Glassmorphism Progress Indicators Component

Glassmorphism Progress Indicators Component with Vibrant color scheme and Simple complexity.

Open

Progress Indicators Component

Paper/Print-inspired progress indicators for a marketplace, featuring candy/sweet colors. Complex design with multiple steps, responsive layout, and dark mode support.

Open