Loading progress bar

Introduction

The Progress bar example shows how to create a smooth, spring-animated progress bar. This example uses useSpring to create a Motion Value with spring physics, making progress updates feel smooth and organic even when the underlying values change in discrete jumps.

Get started

Let's start with the basic structure:

<template>
  <div class="container">
    <div class="progress-container">
      <div class="progress-bar" />
    </div>
  </div>
</template>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--border);
  padding: 10px;
  border-radius: 20px;
}

.progress-container {
  width: 100%;
  max-width: 300px;
  height: 10px;
  background-color: var(--divider);
  border-radius: 20px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 400px;
  background-color: #ff0088;
  border-radius: 20px;
  will-change: transform;
  transform-origin: 0% 50%;
}
</style>

The transform-origin: 0% 50% ensures the bar scales from the left edge.