超簡単にローディング画面を作成できるprogressbar.jsの使い方と初期設定

JavaScript
2023.07.26

Webサイトの読込やデータ送信時に発生する待機時間に誰でも簡単にローディング画面＋パーセントを表示させることができる便利なJavascriptライブラリprogressbar.js

使いたいと思っていても公式サイトやGithubの説明が英語表記だったりしていて初心者が初めて利用するにはなかなかハードルが高いですよね

今回はそんな初めてJavascriptライブラリを使用する方でも簡単に利用できるように

初期設定から使い方までまるっと紹介していきます

progressbar.jsとは

progressbar.jsは、JavaScriptライブラリの1つで、ウェブページ上にカスタマイズ可能なアニメーション付きの進捗バー（プログレスバー）や円形の進捗表示を作成するために使われる人気のあるライブラリです。

メリット

  • 豊富なデザイン
    プログレスバーの外見（色、サイズ、アニメーションスタイルなど）を簡単に変更でき、ウェブサイトのデザインコンセプトに自由に組み合わせることができます。
  • アニメーション
    進捗を視覚的に示すスムーズなアニメーションを表示させることができ、ユーザーのストレスとなる待機時間のイライラを低減させることができます。
  • レスポンシブ対応
    様々な画面サイズに対応し、PCやスマホ、タブレットなどで問題なく使用することができます。
  • 軽量
    progressbar.jsはとても軽量で、ウェブページの読み込み時間に大きな負荷をかけることなく利用できます。
  • 互換性
    モダンなブラウザとの互換性があり、一部の機能をサポートしていない古いブラウザにも対応しています。

このようにprogressbar.jsには多くのメリットがあり、プロジェクトでライブラリの使用不可などの制約がない限りは積極的に利用することをお勧めします。

実際に、自身で０からプログレスバーや進捗率の表示を実装しようとするとそれなりの労力が必要です。

作業の工数削減に大きく役に立つライブラリの使い方は覚えておいて損はありません。

ぜひこの機会に利用してみてください

progressbar.jsの初期設定(インストール)

まず初めにprogressbar.jsを使用するにはファイルをダウンロードする必要があります。

ダウンロード方法は主に以下の2つです

  1. npm installコマンドを使用する
  2. Githubより必要なファイルを直接取得する

どちらでも利用することが可能ですが、npmコマンドを使用するにはnode.jsなどのインストールが必要で慣れていない方だと結構ハードルが高いです。

すでに環境が整っていてコマンド利用ができる方についてはコマンドでインストールするのが簡単です

npmコマンドが利用できるかどうかわからないという方は、おそらく使用できないと思いますので自身のない方は方法2でインストールしましょう！

方法1 npm installコマンドを使用する
  1. ターミナルを開く
  2. ファイルをインストールしたいフォルダに移動
  3. 以下のコマンドを実施
npm install progressbar.js

コマンドを実施するとインストールが始まります。

以下のような表示になり、ファイルが生成されていたら準備完了です

ターミナルのキャプチャ

フォルダ構成のキャプチャ

以下の構成になっていることが確認できればOK

node_modules>progressbar.js>dist>progressbar.js

方法2 Githubより必要なファイルを直接取得する

不要なファイルを取得せず、直接ファイルを取得する方法について紹介していきます。

ファイルはGithubに公開されているものが最新となります。

  1. 以下のGithubページのリンクをクリックしてください
    kimmobrunfeldt/progressbar.js
  2. 開いたページから以下の順に押下 （画像赤枠をクリック）
    dist>progressbar.js
  1. 開いたページの画像赤枠をクリックするとインストールされます
  1. インストールされたファイルを任意のフォルダに配置して完了！

progressbar.jsの使い方

ここからはインストールしたprogressbar.jsのファイルを利用して実際に画面上に表示するところまで紹介していきます

まだ、インストールができていない方は初期設定の項目を確認してから行うようにしましょう

必要なファイルの準備

プログレスバーを実装するにあたり必要なファイルを準備していきます

HTMLの準備

まずは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>
    <script src="./progressbar.js"></script>
    <script src="./script.js"></script>
  </body>
</html>

ファイル名は好きなものにしてよいのですが、今回は『index.html』としておきます。

CSS、Javascriptの準備

CSS、Javascriptはとりあえずファイルのみ準備しておきます

『style.css』『script.js』というファイルを作成しましょう

どちらも中身は何も記載していなくてよいです。

現時点でフォルダ構成は以下のようになっていることを確認してください。

私はprogressbarというフォルダを作成してその中にファイルを準備しました。

また、progressbar.jsは初期設定時にインストールしたファイルをそのまま配置しています。

フォルダ構成は自由ですので皆さんのプロジェクトに合わせて準備してください。

ただし、私の説明は上記のフォルダ構成を基準に説明します。

うまく動作しない場合は上記に合わせて試してみてください。

プログレスバーの作成

それではいよいよプログレスバーを作成していきます。

作成したいプログレスバーのデザインを選びましょう！

以下のリンクから公式ページに飛んでください

proguressbar.js公式ページ リンク

遷移したページの下部に『EXAMPLES』という項目があります

その中にいくつかのデザインが記載があるのがわかります。

今回使用するのは『CIRCLE』の一番右にあるサークルとカウントアップの進捗率がわかるデザインを実装しましょう！

上記で選択したサークルの左下にある『ペンマーク』を押下すると実装に必要なコードが表示されるので

リンクを押下してページ遷移してください

リンクを開くと以下のような画面が表示されます

HTML、CSS、わかりにくいですがしたがJSの必要な記述となります

それぞれをコピーして先ほど作成したファイルに貼り付けていきましょう。

HTMLの記述

<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<div id="container"></div>

こちらにはlinkタグとdivタグがあることがわかります

まず

index.htmlを開き、linkタグはheadタグ内にdivタグはbodyタグ内にそれぞれ記述してください。

CSSの記述

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

上記をstyle.cssに記述してください。

JSの記述

// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Circle(container, {
  color: '#aaa',
  // This has to be the same size as the maximum width to
  // prevent clipping
  strokeWidth: 4,
  trailWidth: 1,
  easing: 'easeInOut',
  duration: 1400,
  text: {
    autoStyleContainer: false
  },
  from: { color: '#aaa', width: 1 },
  to: { color: '#333', width: 4 },
  // Set default step function for all animate calls
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('');
    } else {
      circle.setText(value);
    }

  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(1.0);  // Number from 0.0 to 1.0

上記をscript.jsに記述してください。

これで準備がすべて整いましたので

index.htmlをお好きなブラウザを開いてドラック＆ドロップしましょう

すると先ほど選択したプログレスバーが画面に表示されていることがわかります

一応最後に

HTMLの最終的な状態を張り付けておきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900"
      rel="stylesheet"
      type="text/css"
    />
    <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>

CSS、JSは先ほど貼り付けた内容のみなので割愛します

各ファイルの読込はフォルダ構成・ファイル名にごとに記述が異なるので各自、自身のフォルダ構成・ファイル名を確認して、適宜書き換えてください。

カスタマイズ方法について知りたい方は以下の記事を参照してください！

progressbar.jsのオプションをカスタマイズ！色やサイズを変更しよう
簡単にローディング画面を実装することができるJavascriptライブラリprogressbar.jsには様々なオプショ...
it-memo.work
2023.07.29

まとめ

いかがでしょうか？

とても簡単にプログレスバーを実装することができましたね。

これらのデザインは自由に変更することができ

色の変更なども可能です。

ぜひいろいろ触ってみて自身のサイトにあったデザインを作成していきましょう

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