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:

"use client"

function LoadingProgressBar() {
    return (
        <div className="container">
            <div className="progress-container">
                <div className="progress-bar" />
            </div>
            <StyleSheet />
        </div>
    )
}

function StyleSheet() {
    return (
        <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: var(--hue-1);
                border-radius: 20px;
                will-change: transform;
                transform-origin: 0% 50%;
            }
            `}
        </style>
    )
}

export default LoadingProgressBar

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