【プログラミング】ローディングバーの作り方【CSSでできる】

みなさんはローディングバーを知っていますか？
ローディングバーとは、ゲームなどによくあるダウンロードにかかるまでの進行状況を表示するものです。

今回は、そんなローディングバーを作る方法を解説していきます。
※CSSで簡単に実装できます。

早速ですがコードはこちらです。
※一つずつ解説するので安心してくでさい。

スポンサーリンク

CSSコード

.loading_bar {
background: #ccc;
height: 2px;
width: 20%;
position: relative;
}

.loading_bar::before {
-webkit-animation: width-0to100 5s infinite ease-in-out;
-moz-animation: width-0to100 5s infinite ease-in-out;
-o-animation: width-0to100 5s infinite ease-in-out;
-ms-animation: width-0to100 5s infinite ease-in-out;
animation: width-0to100 5s infinite ease-in-out;
background: #fff;
content: "";
height: 2px;
position: absolute;
left: 0;
top: 0;
}

@keyframes width-0to100 {
0% {
width: 0;
}

100% {
width: 100%;
}
}

それでは、一つずつ解説していきます。

loading__bar部分

.loading_bar {
background: #ccc;
height: 2px;
width: 20%;
position: relative;
}

こちらの部分は、ロードバーの全体の部分で、ロードされるときの背景です。

loading_bar::before部分

loading_bar::before {
-webkit-animation: width-0to100 5s infinite ease-in-out;
-moz-animation: width-0to100 5s infinite ease-in-out;
-o-animation: width-0to100 5s infinite ease-in-out;
-ms-animation: width-0to100 5s infinite ease-in-out;
animation: width-0to100 5s infinite ease-in-out;
background: #fff;
content: "";
height: 2px;
position: absolute;
left: 0;
top: 0;
}

こちらの部分は、ロードしてる状態を示す線になります。
CSSのアニメーションで実装していきます。

-webkit-animation: width-0to100 5s infinite ease-in-out;
-moz-animation: width-0to100 5s infinite ease-in-out;
-o-animation: width-0to100 5s infinite ease-in-out;
-ms-animation: width-0to100 5s infinite ease-in-out;
animation: width-0to100 5s infinite ease-in-out;

こちらは、ロードする線が動く位置を指定します。

０から１００まで線が動くみたいな感じです。
秒数は５秒ですが、変えられます。

infinite ease-in-outは、無限に繰り返して、初めと終わりはゆっくり進むという指定です。

同じようなコードがあるのは、ブラウザによってアニメーションが違うからです。
たとえば、-o-animationは、オペラというブラウザに適用されるので-o-となります。

background: #fff;
content: "";
height: 2px;
position: absolute;
left: 0;
top: 0;

こちらの部分は、ローディング時の線の色です。

@keyframes部分

@keyframes width-0to100 {
0% {
width: 0;
}

100% {
width: 100%;
}
}

こちらの部分は、ローディングの開始と終了部分を定義します。
０と１００でやればOKです。

それでは以上になります。参考になればうれしいです。
最後まで見てくださり、ありがとうございました！