11 lines
812 B
HTML
11 lines
812 B
HTML
<div x-data="{ currentVal: 20 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return (((val-min)/(max-min))*100).toFixed(0)} }" class="w-full">
|
|
<div class="mb-1 flex items-end justify-between gap-2 text-on-surface dark:text-on-surface-dark">
|
|
<span>Progress</span>
|
|
<span x-text="`${calcPercentage(minVal, maxVal, currentVal)}%`"></span>
|
|
</div>
|
|
<div class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
|
|
<div class="h-full rounded-radius bg-primary dark:bg-primary-dark" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
|
|
</div>
|
|
</div>
|
|
</div>
|