【javascript】progressタグを制御する スクロール(scroll)量やローディング(loading)アニメーションとして

progressタグとは?
progressタグは進捗状況をを表示させることができます。 このタグだけで、プログレスバーを作ることができます。
<progress></progress>
上のコードだけで、以下が表示されます。
設定やCSSに関しては以下を参照してください。
参考

スクロール量を表示
以下のボックス内をスクロールしてみてください。 スクロールと共に、下のプログレスバーが増加します。
1行目 : progressタグのmaxを100にする。
<progress id="progress" value="" min="0" max="100"></progress>
<img src="https://gxy-life.com/images/blog/202208/DSC_0286.JPG" alt="">
<img src="https://gxy-life.com/images/blog/202208/DSC_0288.JPG" alt="">
<img src="https://gxy-life.com/images/blog/202208/DSC_0292.JPG" alt="">
<img src="https://gxy-life.com/images/blog/202208/DSC_0293.JPG" alt="">
<img src="https://gxy-life.com/images/blog/202208/DSC_0294.JPG" alt="">
progress {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
-webkit-appearance: none;
}
progress::-webkit-progress-bar {
background: gainsboro;
}
progress::-webkit-progress-value {
background: aqua;
}
img{
width: 100%;
}
13行目 : スクロール量をprogressタグのvalueにする。
const progress = document.getElementById("progress");
window.addEventListener("scroll", function () {
// スクロール量(px)
let scrollPx = document.documentElement.scrollTop;
// まだスクロールされていない部分の高さ
let hiddenHeight =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
// スクロール量(%)
let scrollValue = Math.round((scrollPx / hiddenHeight) * 100);
progress.value = scrollValue;
});
参考

ローディングアニメーションとして使う
リロードボタンを押してみてください。
<div class="wrapper active">
<progress id="progress"></progress>
</div>
<h2>ロード後の画面</h2>
body{
position: relative;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h2{
position: relative;
font-size: 2rem;
}
.wrapper{
position: fixed;
width: 100vw;
height: 100vh;
background: rgb(185, 255, 255);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: .5s ease;
}
.wrapper.active{
opacity: 1;
visibility: visible;
}
.wrapper #progress {
width: 50%;
height: 20px;
}
8行目 : 一瞬でロードが終わった時でも、すぐに消えてバグが発生したと思われないようにタイマーを設定
11行目 : ロードに失敗した時でも5秒後には消えるように設定
const wrapper = document.querySelector(".wrapper");
function loaded() {
wrapper.classList.remove("active");
}
window.addEventListener("load", ()=> {
setTimeout(loaded, 2000);
})
setTimeout(loaded, 5000)
まとめ
- progressタグで進捗状況を表示
- javascriptでvalueを制御
- スクロール量を表示できる
- ローディング画面としても使える