CSSのみでスクロールした際に進捗率のプログレスバーを実装する方法
著者：
松岡宗谷
松岡宗谷投稿日：
今回はCSSのみで画面をスクロールした際にプログレスバーを実装する方法をまとめました。
わりかし簡単なので応用もしやすいかと思います。
実は「プログレスバー」を実装するとユーザーの集中力下がるんじゃないかなってずっと考えていたのですが、用途によってはアリだなと考えが変わってきました。Basicにも取り入れるかもしれませんので忘備録としてもこの記事を書いていきます。
目次
- CSSのみでスクロールした際に進捗率のプログレスバーを実装する方法-デモ画面
- CSSのみプログレスバー実装方法
- CSS
- HTML
CSSのみでスクロールした際に進捗率のプログレスバーを実装する方法-デモ画面
CSSのみでスクロールした際に進捗率のプログレスバーを実装する方法-デモ画面「プログレスバー」ってどんなの？って方もいらっしゃると思いますのでまずはデモ画面を用意いたしました。スクロールすると画面上部左から右にプログレスバーが伸びていきます。一番下までスクロールすると全て右まで伸びます。また上に戻るとプログレスバーも左に減っていきます。
CSSのみプログレスバー実装方法
かなりシンプルです。CSSをちょこっと書いて、HTMLは1行で完成です。
CSS
.progress {
position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 100%;
block-size: 2px;
background-color: #3f434f;
transform-origin: 0 0;
animation-name: progress;
animation-timing-function: linear;
animation-timeline: scroll(root);
}
@keyframes progress {
0% {
scale: 0 1 1;
}
100% {
scale: 1 1 1;
}
}HTML
<div class="progress"></div>これだけでスクロールした際にプログレスバーが表示されます。
CMSの悩みはBasicで一気に解決しましょう
- 完全無料Basicはオープンソースで運営されています。誰しもが自由にBasicを利用できます。
- 超軽量化で超高速配信通常のCMSよりページ容量を70%以上を自動で圧縮を行い更に自動で静的化・圧縮化されたページが配信されます。
- SEOにつよつよ70%以上軽量化に加えて最新SEOに対応した構造で静的化・圧縮化されたページはライバルサイトより圧倒的に評価されます
ライバルサイトより一歩前にいけるCMSでサイトを構築しませんか？
著者プロフィール