トップへ戻るボタンにスクロール量を表示する方法

以下のコードをstyle.cssに追加します。

/* カスタムプロパティの登録 */
@property --per {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

/* スクロール変化用キーフレーム */
@keyframes scroll-progress {
  from {
    --per: 0%;
  }
  to {
    --per: 100%;
  }
}

/* スクロール位置とカスタムプロパティの連動設定 */
.go-to-top-button {
  animation: scroll-progress auto linear;
  animation-range: 0% 100%;
  animation-timeline: scroll(root);
}

以下のコードをstyle.cssに追加します。

.go-to-top-button {
  background-color: transparent;

  &::before {
    --my-color: #eee;           /* 未通過（ベース）の色 */
    --my-progress: #ff0000;     /* 進捗率の色 */

    background-image: conic-gradient(
      var(--my-progress) 0% var(--per),
      var(--my-color) var(--per) 100%
    );
    border-radius: 100%;
    content: '';
    display: block;
    height: 100%;
    mask: radial-gradient(circle, transparent 50%, #000 54%);
    position: absolute;
    width: 100%;
  }
}