Progress Card

1<script>
2  let pct = 68;
3</script>
4
5<div class="card">
6  <div class="row"><span>Speicher</span><span class="pct">{pct}%</span></div>
7  <div class="track"><div class="fill" style="width:{pct}%"></div></div>
8  <div class="hint">6,8 von 10 GB belegt</div>
9  <div class="btns">
10    <button on:click={() => pct = Math.max(0, pct - 10)}>−</button>
11    <button on:click={() => pct = Math.min(100, pct + 10)}>+</button>
12  </div>
13</div>
14
15<style>
16  .card{width:300px;padding:22px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:#101019;font-family:system-ui}
17  .row{display:flex;justify-content:space-between;color:#fff;font-size:15px;font-weight:600;margin-bottom:12px}
18  .pct{color:#a78bfa}
19  .track{height:9px;border-radius:10px;background:rgba(255,255,255,.08);overflow:hidden}
20  .fill{height:100%;border-radius:10px;background:linear-gradient(90deg,#8b5cf6,#06b6d4);transition:width .4s ease}
21  .hint{margin-top:10px;color:rgba(255,255,255,.5);font-size:13px}
22  .btns{display:flex;gap:8px;margin-top:14px}
23  .btns button{flex:1;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.04);color:#fff;font-size:16px;cursor:pointer}
24</style>