非常にシンプルな円のプログレスバーの作り方について書きます。
こんな感じの動きになります。
水色のボックスがあってその中にぐるぐる回るアニメーションと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"
}