progressbar.jsのオプションをカスタマイズ！色やサイズを変更しよう

JavaScript

簡単にローディング画面を実装することができるJavascriptライブラリprogressbar.jsには様々なオプションが用意されています。

それらを変更することで思い通りのデザインを実現することができます。

今回は以下の5つの項目について変更方法をご紹介していきます

確認したいものだけ見る場合は目次よりジャンプすることができるので是非ご利用ください

ご紹介するオプション

  • ローディング画面で表示させるブログレスバーのサイズ変更
  • ブログレスバーのカウントアップ前後での色変更
  • プログレスバーの太さ変更
  • カウントアップ時のアニメーション変更
  • アニメーション時間の変更

使用するプログレスバーの準備

今回使用するプログレスバーを準備していきます

公式サイトから上記赤枠のパーセントとプログレスバーのセットのサンプルを使用していきます。

以下にコードを張り付けておきます。

それぞれファイルを作成して準備していきましょう

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Document</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="./progressbar.js"></script>
    <script src="./script.js"></script>
  </body>
</html>

style.css

#container {
  margin: 20px;
  width: 400px;
  height: 8px;
  position: relative;
}

script.js

var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: { width: '100%', height: '100%' },
  text: {
    style: {
      color: '#999',
      position: 'absolute',
      right: '0',
      top: '30px',
      padding: 0,
      margin: 0,
      transform: null,
    },
    autoStyleContainer: false,
  },
  from: { color: '#FFEA82' },
  to: { color: '#ED6A5A' },
  step: (state, bar) => {
    bar.setText(Math.round(bar.value() * 100) + ' %');
  },
});

bar.animate(1.0);

準備ができたらさっそくオプションの変更を行って修正前後で見比べてみましょう

今回の変更手順についてはライブラリの導入や初期設定などは説明しておりません

うまく表示させられない方は以下の記事を参照して、progressbar.jsのインストールから画面表示までの動作確認を行ってから本記事を閲覧してください

超簡単にローディング画面を作成できるprogressbar.jsの使い方と初期設定
Webサイトの読込やデータ送信時に発生する待機時間に誰でも簡単にローディング画面＋パーセントを表示させることができる便利...
it-memo.work
2023.07.26

progressbar.jsのオプションを変更する

最初に今回変更していく各オプションの役割を確認していきましょう

var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',   ※プログレスバーのアニメーション
  duration: 1400,　　　　　※アニメーションの変化時間
  color: '#FFEA82',        ※プログレスバーの色
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: { width: '100%', height: '100%' },
  text: {
    style: {
      color: '#999',           ※ カウントアップ％の文字色
      position: 'absolute',
      right: '0',
      top: '30px',
      padding: 0,
      margin: 0,
      transform: null,
    },
    autoStyleContainer: false,
  },
  from: { color: '#FFEA82' },  　※カウントアップ前の色
  to: { color: '#ED6A5A' },　　  ※カウントアップ後の色
  step: (state, bar) => {
    bar.setText(Math.round(bar.value() * 100) + ' %');
  },
});

プログレスバーのアニメーションを変更

プログレスバーのアニメーションを変更するには『easeing』のオプションを変更する必要があります。

easeingに対して指定できる値は以下の通りです

easeingの設定値
  • リニア（linear）　開始から終了まで等速
  • イーズイン（easeIn）　開始から徐々に加速
  • イーズアウト（easeOut）　終了時に徐々に減速
  • イーズインアウト（easeInOut） 開始から加速して終了時には減速 ※初期値

各パラメータの変化イメージ

アニメーションの変化時間を変更

アニメーションの変化時間は『duration』の値を参照しています。

変化時間とはゲージの上昇やカウントアップの際に上限に到達するまで何秒で変化させるかということになります

例えば、3秒で0%~100％までを到達させたいとするとdurationに設定する値は3000となります

ここで注意していただきたいのは秒数の指定方法はミリ秒単位となることです。

3秒にしたいからと3の値を設定すると、とても早く100％まで到達してしまいますので注意してください。

プログレスバーの色を変更

こちらは基本的には通常のCSSさえ理解していれば変更はできるかと思いますので簡単にお話していきます。

指定方法は多数あり、RGBやカラーコード、色名などを指定することで変更可能です。

ご自身のサイトイメージに合わせたカラーに自由に変更できるので是非ご活用してください。

開始と終了でプログレスバーの色を徐々に変化させる

先ほど紹介したのは1色のみのプログレスバーでしたが、今回は開始は赤色を指定して、終了までに徐々に青く変化させるなど、少し特殊なパターンを紹介していきます。

確認していただきたいのは以下の記述部分です

from: { color: '#FFEA82' },  　※カウントアップ前の色
  to: { color: '#ED6A5A' },　　  ※カウントアップ後の色
  step: (state, bar) => {
    bar.setText(Math.round(bar.value() * 100) + ' %');
　　bar.path.setAttribute('stroke',state.color); ※この記述がないと色変化は起こらない
  },

使いたいプログレスバーの種類によっては最初から記載がある場合もありますが、

もし記述がない場合は、以下の記述も追記してください

bar.path.setAttribute('stroke',state.color);

こちらは、色の変化を可能にするためのオプションになります。こちらを指定することで

カウントアップ前の色とカウントアップ後の色を指定することができます。

色指定は通常のCSSと同様なのでお好きな色を指定してください

変更後の動作は以下のようになります

カウントアップの文字色を変更

文字色の変更についてはstyle内のcolorによって操作可能です。

こちらも通常のCSS同様の記述でお好きな色に変化可能です。

タイトルとURLをコピーしました