/* ------------------------------------------progress bar--------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------- */
@keyframes grow-progress {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

#progress {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 0.2em;
    transform-origin: 0 50%;
    background: lightblue;
}

/* <axis>: block(default), inline
<scroller>: nearest(default), root, self
理解：block就是Y，inline就是X。 nearest就是找最近的ancestor，随着它的scroll而动。
root就是HTML root， self就是自己的element。
动画理解的例子： https://scroll-driven-animations.style/tools/scroll-timeline/params/ */
#progress {
    animation: grow-progress auto linear;
    animation-timeline: scroll();
    /* animation-range: 0% 100%; */
}