You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.3 KiB
Svelte
49 lines
1.3 KiB
Svelte
10 months ago
|
<script>export let value = void 0;
|
||
|
|
export let min = 0;
|
||
|
|
export let max = 100;
|
||
|
|
export let height = "h-2";
|
||
|
|
export let rounded = "rounded-token";
|
||
|
|
export let meter = "bg-surface-900-50-token";
|
||
|
|
export let track = "bg-surface-200-700-token";
|
||
|
|
export let labelledby = "";
|
||
|
|
const cTrack = "w-full overflow-hidden";
|
||
|
|
const cMeter = "h-full";
|
||
|
|
$:
|
||
|
|
fillPercent = value ? 100 * (value - min) / (max - min) : 0;
|
||
|
|
$:
|
||
|
|
indeterminate = value === void 0 || value < 0;
|
||
|
|
$:
|
||
|
|
classesIndeterminate = indeterminate ? "animIndeterminate" : "";
|
||
|
|
$:
|
||
|
|
classesTrack = `${cTrack} ${height} ${rounded} ${track} ${$$props.class ?? ""}`;
|
||
|
|
$:
|
||
|
|
classesMeter = `${cMeter} ${rounded} ${classesIndeterminate} ${meter}`;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- Track -->
|
||
|
|
<div
|
||
|
|
class="progress-bar {classesTrack}"
|
||
|
|
data-testid="progress-bar"
|
||
|
|
role="progressbar"
|
||
|
|
aria-labelledby={labelledby}
|
||
|
|
aria-valuenow={value}
|
||
|
|
aria-valuemin={min}
|
||
|
|
aria-valuemax={max - min}
|
||
|
|
>
|
||
|
|
<!-- Meter -->
|
||
|
|
<div class="progress-bar-meter {classesMeter} {classesMeter}" style:width="{indeterminate ? 100 : fillPercent}%" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.animIndeterminate {
|
||
|
|
transform-origin: 0% 50%;
|
||
|
|
animation: animIndeterminate 2s infinite linear;
|
||
|
|
}
|
||
|
|
/* prettier-ignore */
|
||
|
|
@keyframes animIndeterminate {
|
||
|
|
0% { transform: translateX(0) scaleX(0); }
|
||
|
|
40% { transform: translateX(0) scaleX(0.4); }
|
||
|
|
100% { transform: translateX(100%) scaleX(0.5); }
|
||
|
|
}
|
||
|
|
</style>
|