Progress Components - TailwindCSS

1. Simple Progress Bar

Clean and minimal progress bar with customizable width and styling.

Progress 25%

Loading 50%

Complete 75%

<!-- Simple Progress Bar -->
<div class="w-full max-w-md space-y-6">
  <!-- Progress Bar 25% -->
  <div>
    <div class="flex justify-between text-sm text-gray-600 mb-2">
      <span>Progress</span>
      <span>25%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-3">
      <div class="bg-violet h-3 rounded-full" style="width: 25%"></div>
    </div>
  </div>

  <!-- Progress Bar 50% -->
  <div>
    <div class="flex justify-between text-sm text-gray-600 mb-2">
      <span>Loading</span>
      <span>50%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-3">
      <div class="bg-green-500 h-3 rounded-full" style="width: 50%"></div>
    </div>
  </div>

  <!-- Progress Bar 75% -->
  <div>
    <div class="flex justify-between text-sm text-gray-600 mb-2">
      <span>Complete</span>
      <span>75%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-3">
      <div class="bg-blue-500 h-3 rounded-full" style="width: 75%"></div>
    </div>
  </div>
</div>

<template>
  <!-- Simple Progress Bar -->
  <div class="w-full max-w-md space-y-6">
    <!-- Progress Bar 25% -->
    <div>
      <div class="flex justify-between text-sm text-gray-600 mb-2">
        <span>Progress</span>
        <span>25%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-3">
        <div class="bg-violet h-3 rounded-full" style="width: 25%"></div>
      </div>
    </div>

    <!-- Progress Bar 50% -->
    <div>
      <div class="flex justify-between text-sm text-gray-600 mb-2">
        <span>Loading</span>
        <span>50%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-3">
        <div class="bg-green-500 h-3 rounded-full" style="width: 50%"></div>
      </div>
    </div>

    <!-- Progress Bar 75% -->
    <div>
      <div class="flex justify-between text-sm text-gray-600 mb-2">
        <span>Complete</span>
        <span>75%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-3">
        <div class="bg-blue-500 h-3 rounded-full" style="width: 75%"></div>
      </div>
    </div>
  </div>
</template>

export default function SimpleProgressBar() {
  return (
    <div className="w-full max-w-md space-y-6">
      <!-- Progress Bar 25% -->
      <div>
        <div className="flex justify-between text-sm text-gray-600 mb-2">
          <span>Progress</span>
          <span>25%</span>
        </div>
        <div className="w-full bg-gray-200 rounded-full h-3">
          <div className="bg-violet h-3 rounded-full" style="width: 25%"></div>
        </div>
      </div>

      <!-- Progress Bar 50% -->
      <div>
        <div className="flex justify-between text-sm text-gray-600 mb-2">
          <span>Loading</span>
          <span>50%</span>
        </div>
        <div className="w-full bg-gray-200 rounded-full h-3">
          <div className="bg-green-500 h-3 rounded-full" style="width: 50%"></div>
        </div>
      </div>

      <!-- Progress Bar 75% -->
      <div>
        <div className="flex justify-between text-sm text-gray-600 mb-2">
          <span>Complete</span>
          <span>75%</span>
        </div>
        <div className="w-full bg-gray-200 rounded-full h-3">
          <div className="bg-blue-500 h-3 rounded-full" style="width: 75%"></div>
        </div>
      </div>
    </div>
  );
}

2. Animated Progress Bar

Animated progress bar with dynamic updates and smooth transitions.

Uploading

File upload in progress...

<!-- Animated Progress Bar -->
<div x-data="{ progress: 65 }">
  <div class="w-full max-w-md space-y-6">
    <!-- Animated Progress Bar -->
    <div>
      <div class="flex justify-between text-sm text-gray-600 mb-2">
        <span>Uploading</span>
        <span x-text="progress + '%'"></span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
        <div class="bg-gradient-to-r from-violet to-purple-600 h-4 rounded-full transition-all duration-500 ease-out" :style="`width: \${progress}%`"></div>
      </div>
      <p class="text-xs text-gray-500 mt-2">File upload in progress...</p>
    </div>

    <!-- Buttons to control progress -->
    <div class="flex space-x-2">
      <button @click="progress = Math.max(0, progress - 10)" class="px-3 py-1 bg-gray-300 text-gray-700 rounded text-sm hover:bg-gray-400 transition-colors">Decrease</button>
      <button @click="progress = Math.min(100, progress + 10)" class="px-3 py-1 bg-violet text-white rounded text-sm hover:bg-purple-600 transition-colors">Increase</button>
      <button @click="progress = 0" class="px-3 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600 transition-colors">Reset</button>
    </div>
  </div>
</div>

<template>
  <!-- Animated Progress Bar -->
  <div>
    <div class="w-full max-w-md space-y-6">
      <!-- Animated Progress Bar -->
      <div>
        <div class="flex justify-between text-sm text-gray-600 mb-2">
          <span>Uploading</span>
          <span> {{ progress }}%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
          <div class="bg-gradient-to-r from-violet to-purple-600 h-4 rounded-full transition-all duration-500 ease-out" :style="{ width: progress + '%' }"></div>
        </div>
        <p class="text-xs text-gray-500 mt-2">File upload in progress...</p>
      </div>

      <!-- Buttons to control progress -->
      <div class="flex space-x-2">
        <button @click="progress = Math.max(0, progress - 10)" class="px-3 py-1 bg-gray-300 text-gray-700 rounded text-sm hover:bg-gray-400 transition-colors">Decrease</button>
        <button @click="progress = Math.min(100, progress + 10)" class="px-3 py-1 bg-violet text-white rounded text-sm hover:bg-purple-600 transition-colors">Increase</button>
        <button @click="progress = 0" class="px-3 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600 transition-colors">Reset</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const progress = ref(65)
</script>

import React, { useState } from 'react'

export default function AnimatedProgressBar() {
  const [progress, setProgress] = useState(65)

  return (
    <div className="w-full max-w-md space-y-6">
      <!-- Animated Progress Bar -->
      <div>
        <div className="flex justify-between text-sm text-gray-600 mb-2">
          <span>Uploading</span>
          <span>{progress}%</span>
        </div>
        <div className="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
          <div className="bg-gradient-to-r from-violet to-purple-600 h-4 rounded-full transition-all duration-500 ease-out" style= {{ width: `\${progress}%` }}></div>
        </div>
        <p className="text-xs text-gray-500 mt-2">File upload in progress...</p>
      </div>

      <!-- Buttons to control progress -->
      <div className="flex space-x-2">
        <button onClick={() => setProgress(Math.max(0, progress - 10))} className="px-3 py-1 bg-gray-300 text-gray-700 rounded text-sm hover:bg-gray-400 transition-colors">Decrease</button>
        <button onClick={() => setProgress(Math.min(100, progress + 10))} className="px-3 py-1 bg-violet text-white rounded text-sm hover:bg-purple-600 transition-colors">Increase</button>
        <button onClick={() => setProgress(0)} className="px-3 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600 transition-colors">Reset</button>
      </div>
    </div>
  );
}

3. Circular Progress Bar

Modern circular progress indicator with customizable colors and animations.

<!-- Circular Progress Bar -->
<div x-data="{ progress: 75 }">
  <div class="relative w-24 h-24">
    <svg class="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
      <!-- Background circle -->
      <circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="8" fill="transparent" class="text-gray-200"></circle>
      <!-- Progress circle -->
      <circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="8" fill="transparent" class="text-violet" stroke-linecap="round" :stroke-dasharray="`\${2 * Math.PI * 45}`" :stroke-dashoffset="`\${2 * Math.PI * 45 * (1 - progress / 100)}`" style="transition: stroke-dashoffset 0.5s ease;"></circle>
    </svg>
    <!-- Percentage text -->
    <div class="absolute inset-0 flex items-center justify-center">
      <span class="text-lg font-bold text-gray-700" x-text="progress + '%'"></span>
    </div>
  </div>
</div>

<template>
  <!-- Circular Progress Bar -->
  <div>
    <div class="relative w-24 h-24">
      <svg class="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
        <!-- Background circle -->
        <circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="8" fill="transparent" class="text-gray-200"></circle>
        <!-- Progress circle -->
        <circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="8" fill="transparent" class="text-violet" stroke-linecap="round" :stroke-dasharray="2 * Math.PI * 45" :stroke-dashoffset="2 * Math.PI * 45 * (1 - progress / 100)" style="transition: stroke-dashoffset 0.5s ease;"></circle>
      </svg>
      <!-- Percentage text -->
      <div class="absolute inset-0 flex items-center justify-center">
        <span class="text-lg font-bold text-gray-700"> {{ progress }}%</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const progress = ref(75)
</script>

import React, { useState } from 'react'

export default function CircularProgressBar() {
  const [progress, setProgress] = useState(75)
  const radius = 45
  const circumference = 2 * Math.PI * radius

  return (
    <div className="relative w-24 h-24">
      <svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
        <!-- Background circle -->
        <circle cx="50" cy="50" r={radius} stroke="currentColor" strokeWidth="8" fill="transparent" className="text-gray-200"></circle>
        <!-- Progress circle -->
        <circle cx="50" cy="50" r={radius} stroke="currentColor" strokeWidth="8" fill="transparent" className="text-violet" strokeLinecap="round" strokeDasharray={circumference} strokeDashoffset={circumference * (1 - progress / 100)} style= {{ transition: 'stroke-dashoffset 0.5s ease' }}></circle>
      </svg>
      <!-- Percentage text -->
      <div className="absolute inset-0 flex items-center justify-center">
        <span className="text-lg font-bold text-gray-700">{progress}%</span>
      </div>
    </div>
  );
}

4. Multi-Step Progress Indicator

Step-by-step progress indicator perfect for wizards, onboarding, or multi-stage processes.

1

Setup

2

Configure

3

Complete

<!-- Multi-Step Progress Indicator -->
<div x-data="{ currentStep: 2 }">
  <div class="flex items-center justify-between">
    <!-- Step 1 -->
    <div class="flex flex-col items-center">
      <div :class="currentStep >= 1 ? 'bg-violet text-white' : 'bg-gray-200 text-gray-400'" class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm border-2 border-current transition-colors">1</div>
      <span class="text-xs text-gray-600 mt-2">Setup</span>
    </div>

    <!-- Connector 1 -->
    <div class="flex-1 h-0.5 mx-4" :class="currentStep >= 2 ? 'bg-violet' : 'bg-gray-200'"></div>

    <!-- Step 2 -->
    <div class="flex flex-col items-center">
      <div :class="currentStep >= 2 ? 'bg-violet text-white' : 'bg-gray-200 text-gray-400'" class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm border-2 border-current transition-colors">2</div>
      <span class="text-xs text-gray-600 mt-2">Configure</span>
    </div>

    <!-- Connector 2 -->
    <div class="flex-1 h-0.5 mx-4" :class="currentStep >= 3 ? 'bg-violet' : 'bg-gray-200'"></div>

    <!-- Step 3 -->
    <div class="flex flex-col items-center">
      <div :class="currentStep >= 3 ? 'bg-violet text-white' : 'bg-gray-200 text-gray-400'" class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm border-2 border-current transition-colors">3</div>
      <span class="text-xs text-gray-600 mt-2">Complete</span>
    </div>
  </div>
</div>

<template>
  <!-- Multi-Step Progress Indicator -->
  <div>
    <div class="flex items-center justify-between">
      <!-- Step 1 -->
      <div class="flex flex-col items-center">
        <div :class="currentStep >= 1 ? 'bg-violet text-white' : 'bg-gray-200 text-gray-400'" class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm border-2 border-current transition-colors">1</div>
        <span class="text-xs text-gray-600 mt-2">Setup</span>
      </div>

      <!-- Connector 1 -->
      <div class="flex-1 h-0.5 mx-4" :class="currentStep >= 2 ? 'bg-violet' : 'bg-gray-200'"></div>

      <!-- Step 2 -->
      <div class="flex flex-col items-center">
        <div :class="currentStep >= 2 ? 'bg-violet text-white' : 'bg-gray-200 text-gray-400'" class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm border-2 border-current transition-colors">2</div>
        <span class="text-xs text-gray-600 mt-2">Configure</span>
      </div>

      <!-- Connector 2 -->
      <div class="flex-1 h-0.5 mx-4" :class="currentStep >= 3 ? 'bg-violet' : 'bg-gray-200'"></div>

      <!-- Step 3 -->
      <div class="flex flex-col items-center">
        <div :class="currentStep >= 3 ? 'bg-violet text-white' : 'bg-gray-200 text-gray-400'" class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm border-2 border-current transition-colors">3</div>
        <span class="text-xs text-gray-600 mt-2">Complete</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const currentStep = ref(2)
</script>

import React, { useState } from 'react'

export default function MultiStepProgressIndicator() {
  const [currentStep, setCurrentStep] = useState(2)

  return (
    <div className="flex items-center justify-between">
      <!-- Step 1 -->
      <div className="flex flex-col items-center">
        <div className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm border-2 border-current transition-colors ${currentStep >= 1 ? 'bg-violet text-white' : 'bg-gray-200 text-gray-400'}`}>1</div>
        <span className="text-xs text-gray-600 mt-2">Setup</span>
      </div>

      <!-- Connector 1 -->
      <div className={`flex-1 h-0.5 mx-4 ${currentStep >= 2 ? 'bg-violet' : 'bg-gray-200'}`}></div>

      <!-- Step 2 -->
      <div className="flex flex-col items-center">
        <div className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm border-2 border-current transition-colors ${currentStep >= 2 ? 'bg-violet text-white' : 'bg-gray-200 text-gray-400'}`}>2</div>
        <span className="text-xs text-gray-600 mt-2">Configure</span>
      </div>

      <!-- Connector 2 -->
      <div className={`flex-1 h-0.5 mx-4 ${currentStep >= 3 ? 'bg-violet' : 'bg-gray-200'}`}></div>

      <!-- Step 3 -->
      <div className="flex flex-col items-center">
        <div className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm border-2 border-current transition-colors ${currentStep >= 3 ? 'bg-violet text-white' : 'bg-gray-200 text-gray-400'}`}>3</div>
        <span className="text-xs text-gray-600 mt-2">Complete</span>
      </div>
    </div>
  );
}