Loading progress bar

Introduction

The Progress bar example shows how to create a smooth, spring-animated progress bar. This example uses the animate function with spring physics to create fluid transitions between progress updates.

Get started

Let's start with the basic HTML structure:

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

<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%;
        transform: scaleX(0);
    }
</style>

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