CSS Scroll Progress Bar

css Coder B

Page scroll indicator using animation-timeline: scroll() — pure CSS, zero JavaScript. Supported in Chrome 115+, Firefox 110+, Safari 15.4+.

css
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #f97316, #ec4899);
    transform-origin: left;
    transform: scaleX(0);
    animation: grow-bar linear;
    animation-timeline: scroll();
    z-index: 1000;
  }

  @keyframes grow-bar {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

Feedback (0)