filipriec/kompress_eshop
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

penguinui is now in the root dir in penguinui-components/

Browse Source
This commit is contained in:
Priec
2026-06-18 10:21:29 +02:00
parent 0a619517b6
commit ee944ed5ce
181 changed files with 7699 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
penguinui-components/progress/progress-bar-gradient.html Normal file
View File

@@ -0,0 +1,24 @@
<div x-data="{ currentVal: 70 ,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" 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-linear-to-r from-yellow-400 to-lime-400" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
</div>
<div x-data="{ currentVal: 70 ,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" 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-linear-to-r from-green-500 to-green-700" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
</div>
<div x-data="{ currentVal: 70 ,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" 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-linear-to-r from-indigo-500 to-blue-500" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
</div>
<div x-data="{ currentVal: 70 ,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" 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-linear-to-r from-rose-400 via-fuchsia-500 to-indigo-500" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
</div>
<div x-data="{ currentVal: 70 ,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" 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-linear-to-r from-fuchsia-500 via-red-600 to-orange-400" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
</div>
<div x-data="{ currentVal: 70 ,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" 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-linear-to-r from-pink-500 to-rose-500" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
</div>