Progress

<div class="flex flex-col gap-8 w-full">
    <x-ui.progress max="9" value="4" class="text-primary" />
    <x-ui.progress max="100" value="60" class="text-secondary" />
    <x-ui.progress max="40" value="20" class="text-danger" />
    <x-ui.progress max="14" value="14" class="text-success" />
</div>

<div class="flex flex-col gap-8 w-full">
    <div>
        <div class="flex justify-end" style="width: 40%">
            <span class="text-sm text-fg">40%</span>
        </div>
        <x-ui.progress max="10" value="4" class="text-primary" />
    </div>
    <div class="relative h-max">
        <div class="flex justify-end absolute top-0 left-0 h-6 items-center z-5" style="width: 60%">
            <span class="text-sm text-white">60%</span>
        </div>
        <x-ui.progress size="xl" max="10" value="6" class="text-primary" />
    </div>
</div>

<div class="flex flex-col gap-8 w-full">
    <x-ui.progress size="2xs" max="9" value="4" class="text-primary" />
    <x-ui.progress size="xs" max="100" value="60" class="text-primary" />
    <x-ui.progress size="sm" max="40" value="20" class="text-primary" />
    <x-ui.progress max="14" value="14" class="text-primary" />
    <x-ui.progress size="lg" max="20" value="10" class="text-primary" />
</div>

<div class="flex flex-col gap-8 w-full">
    <div class="flex flex-col w-full">
        <x-ui.progress max="10" value="4" class="text-warning" />
        <div class="flex justify-end text-right">
            <span class="text-warning text-sm">Installing ...</span>
        </div>
    </div>
    <div class="flex items-center gap-x-6">
        <x-ui.progress max="10" value="6" class="text-primary" />
        <div class="text-sm text-fg">60%</div>
    </div>
    <div class="flex items-center gap-x-6">
        <x-ui.progress max="10" value="3" class="flex-1 text-danger" />
        <div class="text-sm text-white bg-danger rounded-full size-5 min-w-5 flex items-center justify-center">
            <span class="iconify ph--x text-xs"></span>
        </div>
    </div>
    <div class="flex items-center gap-x-6 w-full">
        <x-ui.progress max="10" value="10" class="flex-1 text-success" />
        <div class="text-white bg-success rounded-full size-5 flex items-center justify-center">
            <span class="iconify ph--check text-xs"></span>
        </div>
    </div>
</div>