Notifications

3 new

Marcus Silva assigned you to Q3 Revenue Report

10 minutes ago

Emma Wilson commented on Homepage Redesign

45 minutes ago

James Miller mentioned you in Sprint Planning

2 hours ago

Sarah Chen uploaded Q2 Analytics Deck

3 hours ago

David Kim requested review on API Integration PR

5 hours ago

View all notifications

Progress

Progress bar examples.

Basic Progress Bars

25%

50%

75%

100%

<div>
  <div class="flex justify-between mb-1"><span class="text-sm text-gray-600">50%</span></div>
  <div class="bg-gray-200 rounded-full h-2.5"><div class="bg-alpine-500 rounded-full h-2.5" style="width: 50%"></div></div>
</div>

Color Variants

Alpine

Green

Sunset

Red

Purple

<div>
  <div class="flex justify-between mb-1"><span class="text-sm text-gray-600">Green</span></div>
  <div class="bg-gray-200 rounded-full h-2.5"><div class="bg-green-500 rounded-full h-2.5" style="width: 45%"></div></div>
</div>

Sizes

Small (h-1)

Default (h-2.5)

Large (h-4)

Extra Large (h-6)

<div>
  <div class="flex justify-between mb-1"><span class="text-sm text-gray-600">Large (h-4)</span></div>
  <div class="bg-gray-200 rounded-full h-4"><div class="bg-alpine-500 rounded-full h-4" style="width: 60%"></div></div>
</div>

With Labels

Profile Complete75%

Storage48%

65%

90%

<div class="bg-gray-200 rounded-full h-6 relative">
  <div class="bg-alpine-500 rounded-full h-6" style="width: 65%"></div>
  <span class="absolute inset-0 flex items-center justify-center text-xs font-medium text-white">65%</span>
</div>

Striped Progress

Striped

Green Striped

Animated Striped

Sunset Striped

<div class="bg-gray-200 rounded-full h-2.5 overflow-hidden">
  <div class="rounded-full h-2.5" style="width: 80%; background-image: repeating-linear-gradient(45deg, #3b82f6 0px, #3b82f6 10px, #60a5fa 10px, #60a5fa 20px); animation: progress-stripes 1s linear infinite;"></div>
</div>