【Webサイト】プログレスバーとカウント（ローディング画面）

変数ｘ

javascriptでローディングのプログレスバーとカウントアップを作るぞ！

動点P

計算が絡むプログラミングか～、なんか難しそうだな～

動点Qちゃん

少しずつ慣れていけば大丈夫です・・・

というわけでWebサイトでよくあるローディング画面で数字が100までカウントして、バーがどんどん伸びていくアレを作ります。jQueryなどで簡単にコピペして数値を入れるだけのものもあるみたいですが、javascriptに慣れていくために、大雑把に解説しつつやっていきます。

See the Pen loading by inu (@tenp) on CodePen.

↑今回解説するもの

javascriptの解説

javascriptの解説

必要な空のHTMLやCSSで装飾をしたあと、javascriptで数字が0から100までカウントし、バーが右に伸びていくコードを書きます。数字が増えるとともにバーの長さも伸びればいいわけですね。

変数を定義する

まずはカウントする数字が入るタグと伸びるバーのタグを取得し、名前をつけておきます。

let percent = document.querySelector(".percent");
let progress = document.querySelector(".progress");

document.querySelector(“.タグのクラス名”);

でそのタグの要素を取得できます。

次にカウントする数字、伸びるバーの長さそのものの変数を定義します。

let count = 0;
let bar = 0;

どちらも0を入れておきます。15とか8とか好きな数字から始めて構いません。

count は0から、bar(伸びるバーの長さ)も0から始まるということです。

変数で呼び出し関数を指定できるようにする

次は、関数を変数に定義しているような以下のコードについて説明します。

let loading = setInterval(animate, 50);

コンピュータに計算させると100まで数える作業などは一瞬で終わってしまうので、計算させる間隔を指定することでゆっくり、少しずつ計算させて、カウントしている最中を見せるようにする必要があります。そんなときに setInterval を使って間隔を空けて作業をさせるようにします。

setInterval(呼び出す関数名 , 呼び出す間隔…ミリ秒)

ここで呼び出す関数とは「100になるまで、バーが伸び切るまで数を増やしていくanimateという名前の関数」です。

この setInterval 関数は一回作動すると止まらなくなるので後で止める必要があります。そのときこの関数を指定できるようにするため、 setInterval () の戻り値を loading に代入しています。

こうすることで後で

clearInterval(loading);

と記述することでストップさせることができます。

だんだん増えていく計算をさせる関数を作る

では今度は先ほど作っておいた

「100になるまで、バーが伸び切るまで数を増やしていくanimateという名前の関数」

を作らないと、存在しないのでは呼び出しても意味がありません。

function animate(){
    if(count == 100 && bar == 150){
        // setInterval()でセットしたタイマーを解除する
        clearInterval(loading);

    }else{
        bar = bar + 1.5;
        count = count + 1;
        progress.style.width = bar + "px";
        percent.textContent = count + "%";

    }
}

function 関数名(){作業の内容}

で、呼び出す関数の内容を｛｝内に記述します。この中には更に

if(条件){〇〇}else{◆◆}

この条件なら〇〇、違ったら◆◆をするというif文がはいっています。

その条件の中の(count == 100 && bar == 150)は「カウント数が100になり、かつバーの長さが150になったら」を意味しています。つまりカウントもバーも目的の数値まで来たらclearInterval(loading)で数字を増やすのをやめるということです。そして、その条件を満たさないとき、つまりまだ数値が一杯になってないときには

bar = bar + 1.5;
count = count + 1;

数値にそれぞれ1.5、1ずつ足していくということです。そしてそれぞれ足して増えていく数値を、見た目に反映させます。最初にタグの要素を取得した変数を使って、そのスタイルを変更していきます。

progress.style.width = bar + “px”;

これはバーの要素の幅を変数barにしています。変数barはどんどん足されているのでどんどん幅が長くなっていくということです。 “px” で単位をつけるのを忘れないようにしましょう。

percent.textContent = count + “%”;

これは％の数値が入っているタグの要素に変数countの数値を入れて、こちらもどんどん数値を増やしていくということです。

100％の数値を点滅させる

最後に100まで数え上げ終わったら、わかりやすくするために一回点滅させています。

点滅させるアニメーションはCSSで作っています

.text-blink{
    animation: blink .7s ease-in-out .1s;
}
@keyframes blink {
    0%{
        opacity: 1;
    }
    50%{
        opacity: .2;
    }
    100%{
        opacity: 1;
    }
}

このクラスをカウントしている数値のタグにつければいいので、

function animate(){
    if(count == 100 && bar == 150){

        percent.classList.add("text-blink");

        // setInterval()でセットしたタイマーを解除する
        clearInterval(loading);

    }else{
        bar = bar + 1.5;
        count = count + 1;
        progress.style.width = bar + "px";
        percent.textContent = count + "%";

    }
}

classList.add(“追加したいクラス名”);

でクラス名を追加します。数え上げ終わったら作動させたいのでif文の条件が合っているときに追記しておきます。これでほぼ完成です。