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

<script type="module">
    import { animate, transform } from "https://cdn.jsdelivr.net/npm/motion@12.16.0/+esm"

    const progressBar = document.querySelector(".progress-bar")

    let progress = 0

    animate(progressBar, { scaleX: 0 }, { type: false })

    const interval = setInterval(() => {
        progress = progress + Math.random() * 0.2

        animate(
            progressBar,
            { scaleX: progress },
            { type: "spring", stiffness: 100, damping: 10 }
        )

        if (progress >= 1) {
            clearInterval(interval)
        }
    }, 500)
</script>

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #f5f5f5;
        border: 1px solid #1d2628;
        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%;
        transform: scaleX(0);
    }
</style>