カスタム

CSSをカスタムして使ったデモです。

スクラブ

Progress bar

HTML

index.html

<div class="container"
  data-rola-trigger
  data-rola-scrub-start="top top"
  data-rola-scrub-end="bottom bottom"
>
  ...
</div>

CSS

style.css

.container {
  position: relative;
  padding-block-start: 4px;

  &::before {
    content: "";
    position: fixed;
    z-index: 1;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 4px;
    background-image: linear-gradient(90deg, rgb(131 58 180) 0%, rgb(253 29 29) 50%, rgb(252 176 69) 100%);
    scale: var(--rola-progress, 0) 1;
    transform-origin: left center;
  }
}

JavaScript

main.js

new Rola("[data-rola-trigger]", {
  scrub: true
});