1. ホーム
2. パソコン
3. javascript

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

投稿日 : 2022年08月30日 更新日 :

progressタグとは？

<progress></progress>

参考

【HTML】【CSS】progressタグとは？プロパティの設定とCSSでのスタイルのあて方

スクロール量を表示

<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%;
}

展開

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;
});

参考

【javascript】ページの高さにおけるスクロール量をパーセント（%）で表示

ローディングアニメーションとして使う

<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;
}

展開

const wrapper = document.querySelector(".wrapper");
    
function loaded() {
  wrapper.classList.remove("active");
}

window.addEventListener("load", ()=> {
  setTimeout(loaded, 2000);
})
    
setTimeout(loaded, 5000)

まとめ