▲TOPへ戻る

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

progress

progressタグとは?

progressタグは進捗状況をを表示させることができます。 このタグだけで、プログレスバーを作ることができます。

<progress></progress>

上のコードだけで、以下が表示されます。

設定やCSSに関しては以下を参照してください。

参考

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

スクロール量を表示

以下のボックス内をスクロールしてみてください。 スクロールと共に、下のプログレスバーが増加します。

1行目 : progressタグのmax100にする。

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

参考

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

8行目 : 一瞬でロードが終わった時でも、すぐに消えてバグが発生したと思われないようにタイマーを設定

11行目 : ロードに失敗した時でも5秒後には消えるように設定

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

window.addEventListener("load", ()=> {
  setTimeout(loaded, 2000);
})
    
setTimeout(loaded, 5000)
ロリポップ!レンタルサーバーロリポップ レンタルサーバー SAMURAI ENGINEER(侍エンジニア)|無料カウンセリング予約 侍エンジニア

まとめ

  1. progressタグで進捗状況を表示
  2. javascriptでvalueを制御
  3. スクロール量を表示できる
  4. ローディング画面としても使える

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<

パソコン

javascript

カメラ

ブログ

サイト内検索👇