[HTML][CSS][JavaScript] 画像使ってシンプルな円のプログレスバーを作る

 非常にシンプルな円のプログレスバーの作り方について書きます。

 こんな感じの動きになります。

 水色のボックスがあってその中にぐるぐる回るアニメーションとLoading…のテキストがある感じです。

まずはHTML


 divタグがプログレスバー全体の白いボックスです。

 imgタグはぐるぐる回す画像です。

 pタグはロード中を示すテキストです。

<div class="progressbar-box" id="progressbar-box">
    <img src="画像のパス" class="progress-circle" id="progressbar" />
    <p class="progress-text">loading...</p>
</div>

 ぐるぐる回る画像ここに置いておきます。

見た目、アニメーションのCSS


 基本的にコメントの通りです。

 アニメーションの指定はinfiniteはずっと続くようにする、1sは1秒でそのアニメーションを動かす、linearは一定スピードという意味です。

/* プログレスバー全体の水色のボックス */
.progressbar-box {
  /* 少し透明にする */
  opacity: 0.7;
  /* 角を丸くする */
  border-radius: 10px;
  background-color: aliceblue;
  /* 要素を全て中央ぞろえにする */
  text-align: center;
  width: 170px;
  height: 170px;
  /* 画面の中心になるようにする */
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
}
/* ぐるぐる回る画像・アニメーション */
.progress-circle {
  width: 100px;
  height: 100px;
  margin-top: 5px;
  /* アニメーションの指定 */
  animation: progress-spin infinite 1s linear;
}
/* 画像を1回転させるアニメーション */
@keyframes progress-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

表示/非表示のJavaScriptの関数


 これは単純にプログレスバーの白いボックスの要素を表示・非表示にするか切り替えるだけです。

function showProgressBar() {
  document.getElementById("progressbar-box").style.display = "block"
}
function hideProgressBar() {
  document.getElementById("progressbar-box").style.display = "none"
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です