46 lines
760 B
Svelte
46 lines
760 B
Svelte
<script lang="ts">
|
|
export let value: number;
|
|
</script>
|
|
|
|
<div class="progress-bar" style="--value: {value}%">
|
|
<div class="value" />
|
|
<div class="label">
|
|
<slot>
|
|
{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);
|
|
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;
|
|
}
|
|
</style>
|