##### Recently Browses

- Apps Api
- Dashboard Marketing

##### Memebers

- Ethan Smith Backend Developer
- Isabella Garcia Digital Marketer
- Noah Walker Full Stack Developer

##### Filters

- customers:
  All customers list
- products:
  Bestselling products
- events:
  All upcoming events

## 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%
0%

    <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%
0% 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-semibold value-label hidden text-lg">0%</span>
            <small>Finished</small>
        </span>
    </div>