English Espanol Japanese
Notifications
Critical alert: Server crash detected
Just now
Emiliya mentioned in you a comment
1h
Backup completed successfully
2h
Profile updated successfully
3h
Nikita sent you a friend request
Accept
2d
API updated
3d
View All
Theme
Sidebar

Progress

  1. Home
  3. Components
  5. Progress
Variant

<!--:progress:-->
<div class="progress h-1 rounded-full overflow-hidden bg-primary-subtle" role="progressbar" aria-label="Basic
example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="bg-primary h-1" style="width: 25%"></div>
</div>

<!--:Progress Circle:-->
<div class="relative w-14 h-14" data-progress="65" data-show-value="true">
    <!-- Background circle -->
    <svg class="w-14 h-14 transform -rotate-90" viewBox="0 0 100 100">
        <circle class="text-primary-subtle" stroke-width="6" stroke="currentColor" fill="transparent" r="45" cx="50" cy="50" />
        <circle class="text-primary progress-ring" stroke-width="6" stroke="currentColor" fill="transparent" r="45"
        cx="50" cy="50" stroke-linecap="round" style="stroke-dasharray: 282.6; stroke-dashoffset: 282.6; transition: stroke-dashoffset 1s ease;" />
    </svg>
</div>
Labels
25% 

<div class="flex items-center gap-3">
    <!--:progress:-->
    <div class="progress flex-grow h-1 rounded-full overflow-hidden bg-primary-subtle" role="progressbar"
        aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <div class="bg-primary h-1" style="width: 25%"></div>
    </div>
    <!--:Label:-->
    <span class="text-sm">25%</span>
</div>

<!--:Progress Circle:-->
<div class="relative w-14 h-14" data-progress="65" data-show-value="true">
    <!-- Background circle -->
    <svg class="w-14 h-14 transform -rotate-90" viewBox="0 0 100 100">
        <circle class="text-primary-subtle" stroke-width="6" stroke="currentColor" fill="transparent" r="45" cx="50" cy="50" />
        <circle class="text-primary progress-ring" stroke-width="6" stroke="currentColor" fill="transparent" r="45"
        cx="50" cy="50" stroke-linecap="round" style="stroke-dasharray: 282.6; stroke-dashoffset: 282.6; transition: stroke-dashoffset 1s ease;" />
    </svg>
    <!--:Label:-->
    <span class="absolute inset-0 flex items-center justify-center text-sm value-label hidden">0%</span>
</div>
Sizing / Custom Labels + Color
Downloading
25%
Finished 

<div class="flex items-center gap-3">
    <!--:Label:-->
    <span class="text-sm">Downloading</span>
    <!--:progress:-->
    <div class="progress flex-grow h-2 rounded-full overflow-hidden bg-red-500/10" role="progressbar"
        aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <div class="bg-red-500 h-2" style="width: 25%"></div>
    </div>
    <!--:Label:-->
    <span class="text-sm">25%</span>
</div>

<!--:Progress Circle:-->
<div class="relative w-28 h-28" data-progress="65" data-show-value="true">
    <!-- Background circle -->
    <svg class="w-28 h-28 transform -rotate-90" viewBox="0 0 100 100">
        <circle class="text-green-500/20" stroke-width="6" stroke="currentColor" fill="transparent" r="45" cx="50"
            cy="50" />
        <circle class="text-green-500 progress-ring" stroke-width="6" stroke="currentColor" fill="transparent" r="45"
            cx="50" cy="50" stroke-linecap="round"
            style="stroke-dasharray: 282.6; stroke-dashoffset: 282.6; transition: stroke-dashoffset 1s ease;" />
    </svg>
    <!--:Label:-->
    <span class="absolute inset-0 flex flex-col items-center justify-center">
        <span class="font-medium value-label hidden text-lg">0%</span>
        <small>Finished</small>
    </span>
</div>