5 lines
1.1 KiB
HTML
5 lines
1.1 KiB
HTML
<div x-data="{ currentValA: 20, currentValB: 30, currentValC: 25 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt">
|
|
<div class="h-full rounded-l-radius bg-primary dark:bg-primary-dark" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentValA)}%`" role="progressbar" aria-label="progress bar A" x-bind:aria-valuenow="currentValA" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal"></div>
|
|
<div class="h-full bg-info dark:bg-info" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentValB)}%`" role="progressbar" aria-label="progress bar B" x-bind:aria-valuenow="currentValB" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal"></div>
|
|
<div class="h-full rounded-r-radius bg-success dark:bg-success" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentValC)}%`" role="progressbar" aria-label="progress bar C" x-bind:aria-valuenow="currentValC" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal"></div>
|
|
</div> |