Progressbar

<progress max="9" value="4" class="ui-progress-bar ui-progress-bar-md ui-progress-bar-rounded-md bg-bg-muted text-primary"></progress>
<progress max="100" value="60" class="ui-progress-bar ui-progress-bar-md ui-progress-bar-rounded-md bg-bg-muted text-secondary"></progress>
<progress max="40" value="20" class="ui-progress-bar ui-progress-bar-md ui-progress-bar-rounded-md bg-bg-muted text-red6"></progress>
<progress max="14" value="14" class="ui-progress-bar ui-progress-bar-md ui-progress-bar-rounded-md bg-bg-muted text-emerald6"></progress>

<div class="">
    <div class="flex justify-end" style="width: 40%">
        <span class="text-sm text-fg">40%</span>
    </div>
    <progress max="10" value="4"
        class="ui-progress-bar ui-progress-bar-md ui-progress-bar-rounded-md bg-bg-muted text-primary"></progress>
</div>
<div class="relative hmax">
    <div class="flex justify-end absolute top-0 left-0 h6 items-center z-5" style="width: 40%">
        <span class="text-sm text-white">40%</span>
    </div>
    <progress max="10" value="4"
        class="ui-progress-bar ui-progress-bar-2xl ui-progress-bar-rounded-md bg-bg-muted text-primary"></progress>
</div>

<progress max="9" value="4" class="ui-progress-bar ui-progress-bar-xs ui-progress-bar-rounded-md bg-bg-muted text-primary rounded-md"></progress>
<progress max="9" value="4" class="ui-progress-bar ui-progress-bar-sm ui-progress-bar-rounded-md bg-bg-muted text-primary rounded-md"></progress>
<progress max="9" value="4" class="ui-progress-bar ui-progress-bar-md ui-progress-bar-rounded-md bg-bg-muted text-primary rounded-md"></progress>
<progress max="9" value="4" class="ui-progress-bar ui-progress-bar-lg ui-progress-bar-rounded-md bg-bg-muted text-primary"></progress>
<progress max="9" value="4" class="ui-progress-bar ui-progress-bar-xl ui-progress-bar-rounded-md bg-bg-muted text-primary"></progress>
<progress max="9" value="4" class="ui-progress-bar ui-progress-bar-2xl ui-progress-bar-rounded-md bg-bg-muted text-primary"></progress>

<div class="flex flex-col wfull">
    <progress max="10" value="4"
        class="ui-progress-bar ui-progress-bar-md ui-progress-bar-rounded-md bg-bg-muted text-primary rounded-md"></progress>
    <div class="flex justify-end text-right">
        <span class="text-orange6 text-sm">Installing ...</span>
    </div>
    </div>
    <div class="flex items-center gap-x6">
    <progress max="10" value="6"
        class="ui-progress-bar ui-progress-bar-md ui-progress-bar-rounded-md bg-bg-muted text-primary rounded-md"></progress>
    <div class="text-sm text-fg">60%</div>
</div>
<div class="flex items-center gap-x6">
    <progress max="10" value="3"
        class="ui-progress-bar ui-progress-bar-md ui-progress-bar-rounded-md bg-bg-muted text-primary flex-1 w-auto flex rounded-md"></progress>
    <div class="text-sm text-white bg-red6 rd-full size-5 flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w3.5 h3.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </div>
</div>
<div class="flex items-center gap-x6 wfull">
    <progress max="10" value="10"
        class="ui-progress-bar ui-progress-bar-md ui-progress-bar-rounded-md bg-bg-muted text-primary rounded-md"></progress>
    <div class="text-sm text-white bg-green6 rd-full size-5 flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w3.5 h3.5">
        <path fill-rule="evenodd"
            d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
            clip-rule="evenodd" />
        </svg>
    </div>
</div>