blob: 21c9e6882e35f7efbcf5231e911a448df1ce8125 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<script lang="ts">
interface Props {
value: number
width?: number
}
let { value, width = 320 }: Props = $props()
const percentage = $derived(Math.max(0, Math.min(1, value)) * 100)
</script>
<div class="progress-track" style:width="{width}px">
<div class="progress-fill" style:width="{percentage}%"></div>
</div>
<style>
.progress-track {
height: 2px;
background: rgba(232, 226, 213, 0.06);
border-radius: 1px;
position: relative;
overflow: hidden;
}
.progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: var(--color-accent);
border-radius: 1px;
transition: width 300ms ease-out;
}
</style>
|
