72 lines
1.3 KiB
Svelte
72 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
export let value: number | undefined = undefined;
|
|
</script>
|
|
|
|
<div
|
|
class="progress-bar"
|
|
class:indeterminate={value == undefined}
|
|
style="--value: {value}%"
|
|
>
|
|
<div class="value" />
|
|
<div class="label">
|
|
<slot>
|
|
{value ? Math.round(value) : "?"}%
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 1em;
|
|
background: white;
|
|
position: relative;
|
|
}
|
|
|
|
.value {
|
|
background: var(--primary);
|
|
height: 100%;
|
|
width: var(--value, 100%);
|
|
transition: width 0.2s ease;
|
|
}
|
|
|
|
.progress-bar,
|
|
.value {
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.label {
|
|
font-size: 0.8em;
|
|
color: white;
|
|
z-index: 9;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
font-weight: bold;
|
|
mix-blend-mode: difference;
|
|
}
|
|
|
|
.progress-bar.indeterminate {
|
|
.value {
|
|
animation-name: indeterminate;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
}
|
|
|
|
@keyframes indeterminate {
|
|
0% {
|
|
background-color: var(--primary);
|
|
}
|
|
50% {
|
|
background-color: var(--primary-lighter);
|
|
}
|
|
100% {
|
|
background-color: var(--primary);
|
|
}
|
|
}
|
|
</style>
|