<!-- Linear -->
<div class="progress-bar">
  <div class="progress-fill" style="width: 65%"></div>
</div>

<!-- Etiketli -->
<div class="progress-labeled">
  <div style="display:flex;justify-content:space-between;margin-bottom:0.375rem">
    <span>Progress</span><span>65%</span>
  </div>
  <div class="progress-bar">
    <div class="progress-fill" style="width: 65%"></div>
  </div>
</div>

<style>
.progress-bar {
  height: 0.5rem; background: var(--border);
  border-radius: 9999px; overflow: hidden;
}
.progress-fill {
  height: 100%; background: var(--accent);
  border-radius: 9999px;
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
}
</style>