CSSだけで作るスクロールプログレスバー

CSSだけで作るスクロールプログレスバー

スクロールプログレスバーは、ページのどこまで読まれているかを視覚的に示すUIです。UX向上や離脱防止に効果があります。

この記事では、JavaScriptを使わずにCSSだけで実現する方法を、初級〜上級に分けて紹介します。

初級：固定プログレスバー

① 上部に固定するシンプルバー

CSS
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 4px;
  background: #3498db;
}

まずは基本形。widthを変えることで進捗を表現します。

中級：CSSでスクロール連動

② linear-gradientで擬似的に表現

CSS
body {
  background: linear-gradient(
    to right,
    #3498db 0%,
    #3498db 50%,
    transparent 50%,
    transparent 100%
  );
  background-size: 200% 4px;
  background-repeat: no-repeat;
  background-position: top;
}

背景グラデーションを使って、スクロール量に応じた表現を作るテクニックです。

上級：スクロール連動アニメーション

③ scroll-timelineを使ったプログレスバー

CSS
@keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: #e74c3c;

  animation: progress linear;
  animation-timeline: scroll();
}

最新のCSS仕様を使った方法。JavaScriptなしでスクロールと連動します。

④ グラデーション＋スムーズアニメーション

CSS
.progress-advanced {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(
    to right,
    #3498db,
    #9b59b6
  );
  transform-origin: left;
  transform: scaleX(0);
  z-index: 999;
  animation: grow linear;
  animation-timeline: scroll();
}

@keyframes grow {
  to {
    transform: scaleX(1);
  }
}

scaleXを使うことで、より滑らかな伸び方になります。
※このページに実装

まとめ

  • スクロールプログレスバーはUX向上に効果的
  • CSSだけでも実装可能（最新仕様含む）
  • グラデーションやtransformでデザイン性を高められる

記事ページやLPで活用することで、ユーザーの離脱を防ぎやすくなります。

関連記事

PAGE TOP