Svelte Tweened Progress Ring

1<script>
2  import { tweened } from 'svelte/motion';
3  import { cubicOut } from 'svelte/easing';
4
5  const progress = tweened(0.72, { duration: 900, easing: cubicOut });
6  const R = 52;
7  const C = 2 * Math.PI * R;
8
9  function randomize() {
10    progress.set(Math.round((0.15 + Math.random() * 0.85) * 100) / 100);
11  }
12</script>
13
14<button class="ring-btn" on:click={randomize} aria-label="Neuen Zufallswert animieren">
15  <svg width="140" height="140" viewBox="0 0 140 140" role="img" aria-hidden="true">
16    <circle cx="70" cy="70" r={R} fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="10" />
17    <circle
18      cx="70" cy="70" r={R} fill="none"
19      stroke="url(#ring-grad)" stroke-width="10" stroke-linecap="round"
20      stroke-dasharray={C}
21      stroke-dashoffset={C * (1 - $progress)}
22      transform="rotate(-90 70 70)"
23    />
24    <defs>
25      <linearGradient id="ring-grad" x1="0" y1="0" x2="1" y2="1">
26        <stop offset="0" stop-color="#8b5cf6" />
27        <stop offset="0.5" stop-color="#d946ef" />
28        <stop offset="1" stop-color="#06b6d4" />
29      </linearGradient>
30    </defs>
31  </svg>
32  <span class="value">{Math.round($progress * 100)}%</span>
33</button>
34
35<style>
36  .ring-btn {
37    position: relative;
38    display: grid;
39    place-items: center;
40    padding: 0;
41    border: 0;
42    background: none;
43    cursor: pointer;
44  }
45  .value {
46    position: absolute;
47    color: #fff;
48    font: 700 24px system-ui, sans-serif;
49    letter-spacing: -0.02em;
50  }
51  .ring-btn:focus-visible {
52    outline: 2px solid #c4b5fd;
53    outline-offset: 4px;
54    border-radius: 16px;
55  }
56</style>