Valex - Laravel Tailwind Admin Template

Basic Progress

<div class="progress mb-4 !rounded-full" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 0%"></div>
    </div>
    <div class="progress mb-4 " role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar !rounded-tl-full !rounded-bl-full" style="width: 25%"></div>
    </div>
    <div class="progress mb-4 !rounded-full" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar !rounded-tl-full !rounded-bl-full" style="width: 50%"></div>
    </div>
    <div class="progress mb-4 !rounded-full" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar !rounded-tl-full !rounded-bl-full" style="width: 75%"></div>
    </div>
    <div class="progress mb-0 !rounded-full" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar !rounded-tl-full !rounded-bl-full" style="width: 100%"></div>
    </div>

Different Colored Progress

 <div class="progress mb-4" role="progressbar" aria-valuenow="20" aria-valuemin="0"
    aria-valuemax="100">
        <div class="progress-bar !bg-secondary !rounded-tl-full !rounded-bl-full" style="width: 20%"></div>
    </div>
    <div class="progress mb-4" role="progressbar"
    aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar !bg-warning !rounded-tl-full !rounded-bl-full" style="width: 40%"></div>
    </div>
    <div class="progress mb-4" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar !bg-info !rounded-tl-full !rounded-bl-full" style="width: 60%"></div>
    </div>
    <div class="progress mb-4" role="progressbar"
    aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar !bg-success !rounded-tl-full !rounded-bl-full" style="width: 80%"></div>
    </div>
    <div class="progress" role="progressbar"
    aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar !bg-danger !rounded-tl-full !rounded-bl-full" style="width: 100%"></div>
    </div>

Striped Progress

 <div class="progress mb-4" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped" style="width: 10%">
    </div>
</div>
<div class="progress mb-4" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped !bg-secondary !rounded-tl-full !rounded-bl-full" style="width: 25%">
    </div>
</div>
<div class="progress mb-4" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped !bg-success !rounded-tl-full !rounded-bl-full" style="width: 50%">
    </div>
</div>
<div class="progress mb-4" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped !bg-info !rounded-tl-full !rounded-bl-full" style="width: 75%">
    </div>
</div>
<div class="progress" role="progressbar" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100">
    <div class="progress-bar progress-bar-striped !bg-warning !rounded-tl-full !rounded-bl-full" style="width: 100%"></div>
</div>

Progress Height

 <div class="progress progress-xs mb-4" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-primary !rounded-tl-full !rounded-bl-full" style="width: 10%">
    </div>
</div>
<div class="progress progress-sm mb-4" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-primary !rounded-tl-full !rounded-bl-full" style="width: 25%">
    </div>
</div>
<div class="progress mb-4" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-primary !rounded-tl-full !rounded-bl-full" style="width: 50%">
    </div>
</div>
<div class="progress progress-lg mb-4" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-primary !rounded-tl-full !rounded-bl-full" style="width: 75%">
    </div>
</div>
<div class="progress progress-xl" role="progressbar" aria-valuenow="100" aria-valuemin="0"
        aria-valuemax="100">
    <div class="progress-bar bg-primary !rounded-tl-full !rounded-bl-full" style="width: 100%"></div>
</div>

Progress With Labels

10%

20%

40%

60%

80%

<div class="progress mb-4" role="progressbar"
    aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar !rounded-tl-full !rounded-bl-full" style="width: 10%;">10%</div>
    </div>
    <div class="progress mb-4" role="progressbar"
            aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar !bg-secondary !rounded-tl-full !rounded-bl-full" style="width: 20%;">20%</div>
    </div>
    <div class="progress mb-4" role="progressbar"
    aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar !bg-success !rounded-tl-full !rounded-bl-full" style="width: 40%;">40%</div>
    </div>
    <div class="progress mb-4" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar !bg-info !rounded-tl-full !rounded-bl-full" style="width: 60%;">60%</div>
    </div>
    <div class="progress mb-0" role="progressbar"
    aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar !bg-warning !rounded-tl-full !rounded-bl-full" style="width: 80%;">80%</div>
    </div>

Multiple bars With Sizes

<div class="progress-stacked progress-xs mb-4 flex">
    <div class="progress-bar" role="progressbar" style="width: 5%"
        aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar !bg-secondary !rounded-none" role="progressbar" style="width: 10%"
        aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar !bg-success !rounded-none" role="progressbar" style="width: 15%"
        aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-stacked progress-sm mb-4 flex">
    <div class="progress-bar !bg-warning" role="progressbar" style="width: 10%"
        aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar !bg-info !rounded-none" role="progressbar" style="width: 15%"
        aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar !bg-danger !rounded-none" role="progressbar" style="width: 20%"
        aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-stacked mb-4 flex">
    <div class="progress-bar !bg-info" role="progressbar" style="width: 15%"
        aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar !bg-success !rounded-none" role="progressbar" style="width: 20%"
        aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar !rounded-none" role="progressbar" style="width: 25%"
        aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-stacked progress-lg mb-4 flex">
    <div class="progress-bar !bg-purple" role="progressbar" style="width: 20%"
        aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar !bg-teal !rounded-none" role="progressbar" style="width: 25%"
        aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar !bg-orange !rounded-none" role="progressbar" style="width: 30%"
        aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-stacked progress-xl mb-0 flex">
    <div class="progress-bar !bg-success" role="progressbar" style="width: 25%"
        aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar !bg-danger !rounded-none" role="progressbar" style="width: 30%"
        aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar !bg-warning !rounded-none" role="progressbar" style="width: 35%"
        aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Animated Stripped Progress

<div class="progress mb-4" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped progress-bar-animated"
        style="width: 10%"></div>
</div>
<div class="progress mb-4" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" style="width: 20%"></div>
</div>
<div class="progress mb-4" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 40%"></div>
</div>
<div class="progress mb-4" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width: 60%"></div>
</div>
<div class="progress" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 80%"></div>
</div>

Gradient Progress

<div class="progress mb-4" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-primary-gradient" style="width: 10%"></div>
</div>
<div class="progress mb-4" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-secondary-gradient" style="width: 20%"></div>
</div>
<div class="progress mb-4" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-success-gradient" style="width: 40%"></div>
</div>
<div class="progress mb-4" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-info-gradient" style="width: 60%"></div>
</div>
<div class="progress" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-warning-gradient" style="width: 80%"></div>
</div>

Custom Animated Progress

<div class="progress mb-4 progress-animate" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-primary-gradient" style="width: 10%"></div>
</div>
<div class="progress mb-4 progress-animate" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-secondary-gradient" style="width: 20%"></div>
</div>
<div class="progress mb-4 progress-animate" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-success-gradient" style="width: 40%"></div>
</div>
<div class="progress mb-4 progress-animate" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-info-gradient" style="width: 60%"></div>
</div>
<div class="progress progress-animate" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-warning-gradient" style="width: 80%"></div>
</div>

Custom Progress-1

Mobiles

50%

Watches

60%

Shirts

70%

 <div class="progress progress-sm progress-custom mb-[3rem] progress-animate" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <h6 class="progress-bar-title text-[1rem]">Mobiles</h6>
    <div class="progress-bar" style="width: 50%">
        <div class="progress-bar-value !bg-primary">50%</div>
    </div>
</div>
<div class="progress progress-sm progress-custom mb-[3rem] progress-animate" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <h6 class="progress-bar-title !bg-secondary text-[1rem]">Watches</h6>
    <div class="progress-bar !bg-secondary" style="width: 60%">
        <div class="progress-bar-value !bg-secondary">60%</div>
    </div>
</div>
<div class="progress progress-sm progress-custom progress-animate" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
    <h6 class="progress-bar-title !bg-success text-[1rem]">Shirts</h6>
    <div class="progress-bar !bg-success" style="width: 70%">
        <div class="progress-bar-value !bg-success">70%</div>
    </div>
</div>

Custom Progress-2

<div class="progress progress-sm mb-4" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-item-1 !bg-primary"></div><div class="progress-item-2"></div><div class="progress-item-3"></div>
    <div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress progress-sm mb-4" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-item-1 !bg-secondary"></div><div class="progress-item-2 bg-secondary"></div><div class="progress-item-3"></div>
    <div class="progress-bar !bg-secondary" style="width: 60%"></div>
</div>
<div class="progress progress-sm mb-4" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-item-1 !bg-success"></div><div class="progress-item-2 bg-success"></div><div class="progress-item-3"></div>
    <div class="progress-bar !bg-success" style="width: 70%"></div>
</div>
<div class="progress progress-sm mb-4" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-item-1 !bg-info"></div><div class="progress-item-2 bg-info"></div><div class="progress-item-3 bg-info"></div>
    <div class="progress-bar !bg-info" style="width: 80%"></div>
</div>
<div class="progress progress-sm" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-item-1 !bg-warning"></div><div class="progress-item-2 bg-warning"></div><div class="progress-item-3 bg-warning"></div>
    <div class="progress-bar !bg-warning" style="width: 90%"></div>
</div>

Custom Progress-3

50%

60%

70%

<div class="progress progress-lg mb-[3rem] custom-progress-3 progress-animate" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 50%">
        <div class="progress-bar-value">50%</div>
    </div>
</div>
<div class="progress progress-lg mb-[3rem] custom-progress-3 progress-animate" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar !bg-secondary" style="width: 60%">
        <div class="progress-bar-value secondary">60%</div>
    </div>
</div>
<div class="progress progress-lg custom-progress-3 progress-animate" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar !bg-success" style="width: 70%">
        <div class="progress-bar-value success">70%</div>
    </div>
</div>

Custom Progress-4

10%

20%

40%

60%

80%

90%

<div class="progress progress-xl mb-4 progress-animate custom-progress-4" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-primary-gradient !rounded-sm" style="width: 10%"></div>
    <div class="progress-bar-label">10%</div>
</div>
<div class="progress progress-xl mb-4 progress-animate custom-progress-4 secondary" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-secondary-gradient !rounded-sm" style="width: 20%"></div>
        <div class="progress-bar-label">20%</div>
</div>
<div class="progress progress-xl mb-4 progress-animate custom-progress-4 success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-success-gradient !rounded-sm" style="width: 40%"></div>
        <div class="progress-bar-label">40%</div>
</div>
<div class="progress progress-xl mb-4 progress-animate custom-progress-4 info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-info-gradient !rounded-sm" style="width: 60%"></div>
        <div class="progress-bar-label">60%</div>
</div>
<div class="progress progress-xl mb-4 progress-animate custom-progress-4 warning" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-warning-gradient !rounded-sm" style="width: 80%"></div>
        <div class="progress-bar-label">80%</div>
</div>
<div class="progress progress-xl progress-animate custom-progress-4 danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-danger-gradient !rounded-sm" style="width: 90%"></div>
        <div class="progress-bar-label">90%</div>
</div>

Custom Progress-5

Project Dependencies

25%

35%

40%

Html25%

Css35%

Js40%

 <h6 class="font-semibold mb-2">Project Dependencies</h6>
    <div class="progress-stacked progress-xl mb-[3rem] flex">
        <div class="progress-bar" role="progressbar" style="width: 25%"
            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
        <div class="progress-bar !bg-secondary" role="progressbar" style="width: 35%"
            aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">35%</div>
        <div class="progress-bar !bg-danger" role="progressbar" style="width: 40%"
            aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
    </div>
    <div class="grid grid-cols-12 justify-center">
        <div class="xl:col-span-5">
            <div class="border p-4">
                <p class="text-[0.75rem] font-semibold mb-0 text-[#8c9097]">Html<span class="float-right text-[0.625rem] font-normal">25%</span></p>
                <div class="progress progress-xs mb-4 progress-animate" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar bg-primary" style="width: 25%">
                    </div>
                </div>
                <p class="text-[0.75rem] font-semibold mb-0 text-[#8c9097]">Css<span class="float-right text-[0.625rem] font-normal">35%</span></p>
                <div class="progress progress-xs mb-4 progress-animate " role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar !rounded-none !bg-secondary" style="width: 35%">
                    </div>
                </div>
                <p class="text-[0.75rem] font-semibold mb-0 text-[#8c9097]">Js<span class="float-right text-[0.625rem] font-normal">40%</span></p>
                <div class="progress progress-xs mb-0 progress-animate " role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar !rounded-br-full !rounded-tr-full !bg-danger" style="width: 40%">
                    </div>
                </div>
            </div>
        </div>
    </div>

Vertical Progress


    <div class="flex space-x-8 rtl:space-x-reverse">
        <div class="ti-main-progress flex-col flex-nowrap justify-end !w-2 !h-40 bg-gray-200 dark:bg-light">
            <div class="bg-primary ti-main-progress-bar" role="progressbar" style="height: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="ti-main-progress flex-col flex-nowrap justify-end !w-3 !h-40 bg-gray-200 dark:bg-light">
            <div class="bg-secondary ti-main-progress-bar" role="progressbar" style="height: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="ti-main-progress flex-col flex-nowrap justify-end !w-4 !h-40 bg-gray-200 dark:bg-light">
            <div class="bg-warning ti-main-progress-bar" role="progressbar" style="height: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="ti-main-progress flex-col flex-nowrap justify-end !w-5 !h-40 bg-gray-200 dark:bg-light">
            <div class="bg-info ti-main-progress-bar" role="progressbar" style="height: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="ti-main-progress flex-col flex-nowrap justify-end !w-6 !h-40 bg-gray-200 dark:bg-light">
            <div class="bg-danger ti-main-progress-bar" role="progressbar" style="height: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>

Labels at The end

25%

50%

75%

100%

 
    
<div class="flex items-center gap-x-3 whitespace-nowrap w-full">
    <div class="ti-main-progress w-full h-4 bg-gray-200 dark:bg-light">
        <div class="ti-main-progress-bar bg-primary text-xs text-white text-center" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="w-10 text-end">
    <span class="text-sm text-gray-800 dark:text-white">25%</span>
    </div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex items-center gap-x-3 whitespace-nowrap w-full">
    <div class="ti-main-progress w-full h-4 bg-gray-200 dark:bg-light">
        <div class="ti-main-progress-bar bg-primary text-xs text-white text-center" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="w-10 text-end">
    <span class="text-sm text-gray-800 dark:text-white">50%</span>
    </div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex items-center gap-x-3 whitespace-nowrap w-full">
    <div class="ti-main-progress w-full h-4 bg-gray-200 dark:bg-light">
        <div class="ti-main-progress-bar bg-primary text-xs text-white text-center" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="w-10 text-end">
    <span class="text-sm text-gray-800 dark:text-white">75%</span>
    </div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex items-center gap-x-3 whitespace-nowrap w-full">
    <div class="ti-main-progress w-full h-4 bg-gray-200 dark:bg-light">
        <div class="ti-main-progress-bar bg-primary text-xs text-white text-center" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="w-10 text-end">
    <span class="text-sm text-gray-800 dark:text-white">100%</span>
    </div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex items-center gap-x-3 whitespace-nowrap w-full">
    <div class="ti-main-progress w-full h-4 bg-gray-200 dark:bg-light">
        <div class="ti-main-progress-bar bg-danger text-xs text-white text-center" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="w-10 text-end">
        <span class="flex-shrink-0 ms-auto size-4 flex justify-center items-center rounded-full bg-danger text-white">
            <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
            </svg>
        </span>
        </div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex items-center gap-x-3 whitespace-nowrap w-full">
    <div class="ti-main-progress w-full h-4 bg-gray-200 dark:bg-light">
        <div class="ti-main-progress-bar bg-success text-xs text-white text-center" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="w-10 text-end">
        <span class="flex-shrink-0 ms-auto size-4 flex justify-center items-center rounded-full bg-success text-white">
            <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
        </span>
    </div>
</div>

Progress With Steps

50%

25%

100%


    <div>
        <!-- Step Progress -->
        <div class="max-w-40 ti-main-progress !h-full items-center gap-x-1">
            <div class="w-full h-2.5 ti-main-progress-bar bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-gray-200 dark:bg-light text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-gray-200 dark:bg-light text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div>
            <div class="w-10 text-end">
                <span class="text-sm text-gray-800 dark:text-white">50%</span>
            </div>
            </div>
        </div>
        <!-- End Step Progress -->
        <!-- Step Progress -->
        <div class="ti-main-progress !h-full items-center gap-x-1">
            <div class="w-full h-2.5 ti-main-progress-bar bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-gray-200 dark:bg-light text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-gray-200 dark:bg-light text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div>
            <div class="w-10 text-end">
                <span class="text-sm text-gray-800 dark:text-white">50%</span>
            </div>
            </div>
        </div>
        

    </div>
    <div>
        <!-- Step Progress -->
        <div class="max-w-40 ti-main-progress !h-full items-center gap-x-1">
            <div class="w-full h-2.5 ti-main-progress-bar bg-danger text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-danger/10 text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-danger/10 text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-danger/10 text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div>
                <div class="w-10 text-end">
                <span class="text-sm text-danger">25%</span>
                </div>
            </div>
        </div>
        <!-- End Step Progress -->
        <!-- Step Progress -->
        <div class="w-full ti-main-progress !h-full items-center gap-x-1">
            <div class="w-full h-2.5 ti-main-progress-bar bg-danger text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-danger/10 text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-danger/10 text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-danger/10 text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div>
                <div class="w-10 text-end">
                <span class="text-sm text-danger">25%</span>
                </div>
            </div>
        </div>
        <!-- End Step Progress -->
    </div>
    <div>
        <!-- Step Progress -->
        <div class="max-w-40 ti-main-progress !h-full items-center gap-x-1">
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div>
                <div class="w-10 text-end">
                    <span class="text-sm text-gray-800 dark:text-white">100%</span>
                </div>
            </div>
        </div>
        <!-- End Step Progress -->
        <!-- Step Progress -->
        <div class="ti-main-progress !h-full items-center gap-x-1">
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            <div>
                <div class="w-10 text-end">
                    <span class="text-sm text-gray-800 dark:text-white">100%</span>
                </div>
            </div>
        </div>
        <!-- End Step Progress -->
    </div>
    <div>
        <!-- Step Progress -->
        <div class="max-w-[8.5rem] ti-main-progress !h-full items-center gap-x-1">
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="ms-1">
                <span class="flex-shrink-0 ms-auto size-4 flex justify-center items-center rounded-full bg-success text-white">
                    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </span>
            </div>
        </div>
            <!-- End Step Progress -->
        
        <!-- Step Progress -->
        <div class="ti-main-progress !h-full items-center gap-x-1">
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="w-full h-2.5 ti-main-progress-bar bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            <div class="ms-1">
                <span class="flex-shrink-0 ms-auto size-4 flex justify-center items-center rounded-full bg-success text-white">
                    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </span>
            </div>
        </div>
        <!-- End Step Progress -->
    </div>

Circular progress

72%


    <div class="flex gap-x-5">
        <!-- Circular Progress -->
        <div class="relative size-40">
            <svg class="size-full" width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
            <!-- Background Circle -->
            <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-gray-200 dark:text-white/10" stroke-width="2"></circle>
            <!-- Progress Circle inside a group with rotation -->
            <g class="origin-center -rotate-90 transform">
                <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-primary" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="75"></circle>
            </g>
            </svg>
        </div>
        <!-- End Circular Progress -->

        <!-- Circular Progress -->
        <div class="relative size-40">
            <svg class="size-full" width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
            <!-- Background Circle -->
            <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-gray-200 dark:text-white/10" stroke-width="2"></circle>
            <!-- Progress Circle inside a group with rotation -->
            <g class="origin-center -rotate-90 transform">
                <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-primary" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="75"></circle>
            </g>
            </svg>
            <!-- Percentage Text -->
            <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
            <span class="text-center text-2xl font-bold text-gray-800 dark:text-white">72%</span>
            </div>
        </div>
        <!-- End Circular Progress -->
    </div>

Switcher

Notifications

Mobiles

Watches

Shirts

Project Dependencies

Vertical Progress

Labels at The end

Progress With Steps

Circular progress

Switcher

Petey Cruiser

Jimmy Changa

Graham Cracker

Donatella Nobatti

Anne Fibbiyon

New files available

Updates Available

New Order Received

New review received

22 verified registrations

Project has been approved

Petey Cruiser

Notifications

Daneil Scott

Valex Video call

Daneil Scott

Calling...

Valex Voice call

Daneil Scott

Calling...

Progress

Mobiles

Watches

Shirts

Project Dependencies

Vertical Progress

Labels at The end

Progress With Steps

Circular progress