Back to Discover
Tailwind CSS Progress Bar Examples

Amelia
Created Nov 03, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<body class="bg-gray-50 min-h-screen py-12 px-4">
  <div class="max-w-3xl mx-auto space-y-8">
    <h1 class="text-3xl font-bold text-gray-900 mb-8">Progress Bar Examples</h1>

    <!-- Basic Progress Bar -->
    <div class="bg-white rounded-lg shadow-sm p-6">
      <h2 class="text-lg font-semibold text-gray-700 mb-4">Basic Progress Bar</h2>
      <div class="w-full bg-gray-200 rounded-full h-2">
        <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div>
      </div>
      <p class="text-sm text-gray-500 mt-2">65% Complete</p>
    </div>

    <!-- Animated Progress Bar -->
    <div class="bg-white rounded-lg shadow-sm p-6" x-data="{ progress: 0 }" x-init="setInterval(() => { progress = progress >= 100 ? 0 : progress + 1 }, 50)">
      <h2 class="text-lg font-semibold text-gray-700 mb-4">Animated Progress Bar</h2>
      <div class="w-full bg-gray-200 rounded-full h-2">
        <div class="bg-green-600 h-2 rounded-full transition-all duration-300" :style="`width: ${progress}%`"></div>
      </div>
      <p class="text-sm text-gray-500 mt-2" x-text="`${progress}% Complete`"></p>
    </div>

    <!-- Progress Bar with Icon -->
    <div class="bg-white rounded-lg shadow-sm p-6" x-data="{ progress: 75 }">
      <h2 class="text-lg font-semibold text-gray-700 mb-4">Progress with Icon</h2>
      <div class="flex items-center gap-3">
        <ion-icon name="cloud-upload-outline" class="text-2xl text-purple-600"></ion-icon>
        <div class="flex-1">
          <div class="w-full bg-gray-200 rounded-full h-2">
            <div class="bg-purple-600 h-2 rounded-full transition-all duration-300" :style="`width: ${progress}%`"></div>
          </div>
        </div>
        <span class="text-sm font-medium text-gray-700" x-text="`${progress}%`"></span>
      </div>
    </div>

    <!-- Multiple Progress Bars -->
    <div class="bg-white rounded-lg shadow-sm p-6" x-data="{ tasks: [
                                                           { name: 'Design', progress: 100, color: 'bg-emerald-600' },
                                                           { name: 'Development', progress: 70, color: 'bg-blue-600' },
                                                           { name: 'Testing', progress: 45, color: 'bg-amber-600' },
                                                           { name: 'Deployment', progress: 20, color: 'bg-red-600' }
                                                           ]}">
      <h2 class="text-lg font-semibold text-gray-700 mb-4">Project Tasks</h2>
      <div class="space-y-4">
        <template x-for="task in tasks" :key="task.name">
          <div>
            <div class="flex justify-between items-center mb-2">
              <span class="text-sm font-medium text-gray-700" x-text="task.name"></span>
              <span class="text-sm text-gray-500" x-text="`${task.progress}%`"></span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2">
              <div class="h-2 rounded-full transition-all duration-300" :class="task.color" :style="`width: ${task.progress}%`"></div>
            </div>
          </div>
        </template>
      </div>
    </div>

    <!-- Interactive Progress Bar -->
    <div class="bg-white rounded-lg shadow-sm p-6" x-data="{ progress: 50 }">
      <h2 class="text-lg font-semibold text-gray-700 mb-4">Interactive Progress</h2>
      <div class="w-full bg-gray-200 rounded-full h-3 mb-4">
        <div class="bg-indigo-600 h-3 rounded-full transition-all duration-300" :style="`width: ${progress}%`"></div>
      </div>
      <div class="flex gap-2">
        <button @click="progress = Math.max(0, progress - 10)" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
          <ion-icon name="remove-outline"></ion-icon>
        </button>
        <button @click="progress = Math.min(100, progress + 10)" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
          <ion-icon name="add-outline"></ion-icon>
        </button>
        <button @click="progress = 0" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition ml-auto">
          Reset
        </button>
      </div>
    </div>

    <!-- Large Progress Bar with Status -->
    <div class="bg-white rounded-lg shadow-sm p-6" x-data="{ progress: 85 }">
      <h2 class="text-lg font-semibold text-gray-700 mb-4">File Upload</h2>
      <div class="flex items-center gap-3 mb-3">
        <ion-icon name="document-text-outline" class="text-2xl text-gray-600"></ion-icon>
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-700">project-files.zip</p>
          <p class="text-xs text-gray-500">24.5 MB of 28.8 MB</p>
        </div>
        <ion-icon name="checkmark-circle" class="text-2xl text-green-600" x-show="progress === 100"></ion-icon>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2">
        <div class="bg-gradient-to-r from-blue-600 to-cyan-600 h-2 rounded-full transition-all duration-300" :style="`width: ${progress}%`"></div>
      </div>
    </div>
  </div>
Comments (0)

No comments yet. Be the first!