今回は、ファイルアップロードをする時によく見る進行状況（プログレスバー）の設置とカスタマイズについてご紹介していきます。
この記事を見ることで難しそうなプログレスバーの設置はもちろん、プログレスバーのカスタマイズ方法も解決！
かつ！
WEB制作における時短にもなります。
基本的にはコピペで流用出来ると思いますが、各々の実装環境にて調整をお願いします。
取り急ぎ今すぐ実装する方法が知りたいって方は「まとめ」に全てのコードを載せているのでそちらをご覧ください。
それではいってみましょう！
HTMLでプログレスバー本体を設置
まずはHTMLでプログレスバーを設置します。
といっても難しいことはありません。
下のコードを表示させたいところにサクッとコピペしちゃいましょう！
<progress></progress>See the Pen Untitled by show (@show0205) on CodePen.
このタグだけでプログレスバーの表示ができます。
ですがこのままだと役に立たないのでここから少し見た目を整えていきましょう！
プログレスバーに必要な設定をする
progressタグには設定をするべき2つの属性があります。それが…
- max属性：全体の値
- value属性：現時点の値
max属性はプログレスバー全体の値なのですが分かりやすく100（％）を最大値としておきましょう。
value属性は今いる場所を示してくれる、という感じです。
<progress max="100" value="50" id="progress"></progress>See the Pen Untitled by show (@show0205) on CodePen.
今は動きがないですが何となくよく見る感じになってきましたね。
このパターンだと100％のうち50％まで進んでいるよっていうことになります。
ここで注意！
max属性は設定しないとプログレスバーの設定値が0〜1になってしまうので、必ず設定しよう！
JavaScriptでも制御できる（こっちがおすすめ）
JavaScriptでもvalue属性は変更できます。
というよりファイルアップロードっていう動的なことを考えるとこっちの方が個人的にはおすすめです！
まずはJavaScriptのための準備としてHTMLの方を少し変更します。
<progress max="100" value="0" id="progress"></progress>
<p id="progressResult"></p>JavaScriptで変更させるので保守性も考えてvalue属性は0にしました。
さらにプログレスバーの下に進捗率を◯％と表示させるためのpタグを入れました。
いよいよ本題のJavaScriptを入れていきます。
const progress = document.querySelector("#progress");
const progressResult = document.querySelector("#progressResult");
progress.value = 50;
progressResult.innerHTML = progress.value + '%';こうすることで先ほどと同じようなプログレスバーに続いてプログレスバーの下に進捗率も表示させました。
See the Pen Untitled by show (@show0205) on CodePen.
これが基本形になります。
ではここからいよいよプログレスバーがぐぐぐっと伸びていくアニメーション部分を作成していきます。
プログレスバーのアニメーション実装
まずはJavaScriptを少し変えていきます。
const progress = document.querySelector("#progress");
const progressResult = document.querySelector("#progressResult");
let percentage;
let interval;
function increment() {
percentage += 1;
progress.value = percentage;
progressResult.innerHTML = progress.value;
if (percentage === 100) {
clearInterval(interval);
}
console.log(progress.value);
}
function animation() {
percentage = progress.value;
interval = setInterval("increment()", 100);
}何やら色々と増えていますのでめちゃくちゃ簡単に説明しますね。
- increment関数：valueの値を増やす
- animation関数：increment関数を100ms（0.1秒）ごとに繰り返す
さっきのHTMLのままだと上記の関数を動かすきっかけ（トリガー）がないのでボタンを設置します。
<progress max="100" value="0" id="progress"></progress>
<p id="progressResult"></p>
<button id="btn" onclick="animation()">クリック</button>See the Pen Untitled by show (@show0205) on CodePen.
ボタンを押してみてください。
これで動くようになりました。
increment関数の中に入っている条件分岐（if文）はプログラム側で無限ループにならないようになっています。
※無限ループは良くないので入れておきましょう！
プログレスバーの色を変えてみる
デフォルトのままでもいいですがサイトのテーマカラーに合わせたいなどがあると思います。
そういう時用に以下のCSSを設定すれば色が変えられます。
progress {
-webkit-appearance: none;
-moz-appearance: none; /* firefox用 */
border: 1px solid #f00;
border-radius:100px;
}
::-webkit-progress-bar {
background-color: #fff;
border-radius:100px;
}
/* プログレスバーの伸びていく部分 */
::-webkit-progress-value {
background-color: #f00;
border-radius:100px;
}
::-moz-progress-bar { /* firefox用 */
background-color: #f00;
border-radius:100px;
}See the Pen Untitled by show (@show0205) on CodePen.
background-colorやborder-colorを任意の色にしてもらえればOK！
※今は分かりやすく#ff0000の赤色にしています。
まとめ
プログレスバーを実装したい！
プログレスバーをカスタマイズしたい！
そんなお困りごとはこれで解決です！
最後に時短用に本記事で紹介したコードをまとめて載せておくのでお時間がない、細かいことは後で調べるから今はまず解決したい！という方はぜひご覧ください。
See the Pen Untitled by show (@show0205) on CodePen.
ではまた！
当記事で紹介、及び記載している内容は個人的考えに基づいております。
責任は負いかねますので、お試しの際は必ずバックアップを取った上で自己責任のもと実行してください。
