【ローディング】Spin.js入門から基礎編

2023年11月10日2023年11月11日

Spin.jsは、美しいローディングアニメーションを簡単に実装できるライブラリです。

Webページ上で何らかの処理を待つ際にSpin.jsを活用すれば、ほんの数秒の待ち時間でも、ユーザーを退屈させないローティング画面を作成できます。

本記事では、そんなSpin.jsについて解説していきます。

Spin.jsは、良いユーザー体験のために非常に重要なスピナーなのでぜひ参考にしてみてくださいね。

Spin.jsの背景と目的

Webページ上の処理を待つ時間が長いほど、ユーザーは離脱しがちです。

Spin.jsは、その待ち時間を短縮するだけでなく、ユーザーに何らかの処理が行われていることを視覚的に伝える目的で開発されました。

スピナーがもたらすユーザー体験のメリット

視覚的フィードバックは、ユーザーがサイトやアプリケーションとコミュニケーションを取る手段として非常に有効です。

Spin.jsによるスピナーの実装は、その体験を円滑にする手助けをしてくれることが大きなメリットといえるでしょう。

Spin.jsの基本的な使い方 – ステップバイステップでの導入

必要なファイルの準備とインクルード方法

Spin.jsを使用するには、まずライブラリを導入する必要があります。

CDNを利用すると簡単にSpin.jsを導入できるので、以下のコードを使用してみてください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/4.1.1/spin.min.js" integrity="sha512-FIiuNPo30HcyMzg2W0bkaWd9NvDW3bluEEa78u+V24a68OMGAdJ0cdj1/w0OeGuVZoxaym+HCtooUtWk7r/tFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

スピナーの初期化と表示方法

Spin.jsを使うことで、以下のように簡単にローディングアニメーション表示することができます。

var spinner = new Spinner().spin();
document.body.appendChild(spinner.el);

スピナーのカスタマイズ

Spin.jsのローディングアニメーションは、色やサイズなど、多岐にわたるカスタマイズが可能です。

var opts = {
  lines: 13,
  length: 28,
  width: 8,
  radius: 42,
  scale: 1,
  color: '#000'
};
var spinner = new Spinner(opts).spin();
document.body.appendChild(spinner.el);

Spin.jsの高度な応用テクニック

さまざまなシーンに合わせたスピナーデザインの適用

Spin.jsは、オプションでcolorを変更するだけで様々なシーンに合わせてデザインをカスタマイズすることができます。

例えば、ダークモードのサイトに合わせてスピナーの色を白に変更する、などのカスタマイズも可能です。

// ダークモード用スピナー
var darkModeOpts = {
  lines: 12,
  length: 24,
  width: 6,
  radius: 36,
  scale: 1,
  color: '#FFFFFF',  // 白色
  opacity: 0.25
};
var darkSpinner = new Spinner(darkModeOpts).spin();
document.body.appendChild(darkSpinner.el);

上記のサンプルでは、ダークモードに適した白色のスピナーを表示する設定を行っています。

このように、colorオプションを変更することでスピナーの色を簡単にカスタマイズできます。

さらに、opacityなどといった他のオプションも調整すれば、さまざまなシーンやデザインに合わせたスピナーを実装することが可能となります。

AJAX通信やアニメーションとの連携

スピナーは、特にAJAX通信などの非同期処理の間に表示することで、ユーザーへのフィードバックを提供するのに役立ちます。

// スピナーオプションの設定
var opts = {
  lines: 13,
  length: 28,
  width: 8,
  radius: 42,
  scale: 1,
  color: '#000'
};

// スピナーの初期化
var spinner = new Spinner(opts);

// AJAX通信開始時にスピナーを表示
function startLoading() {
  spinner.spin(document.body);
}

// AJAX通信終了時にスピナーを停止
function stopLoading() {
  spinner.stop();
}

// 例: jQueryを利用したAJAX通信
$.ajax({
  url: "https://api.example.com/data",
  method: "GET",
  beforeSend: startLoading,  // 通信開始時にローディングを開始
  complete: stopLoading     // 通信終了時にローディングを停止
});

上記のサンプルコードでは、jQueryのAJAX関数を使用して非同期通信を行う例を示しています。

通信開始時にスピナーを表示する際は、beforeSendでstartLoading関数を呼び出し、スピナーを停止する際は、通信完了後にcompleteでstopLoading関数を呼び出します。

非同期処理の間にスピナーを表示することは、通信が行われている間、Webページが単にフリーズしているのではなく、何らかの処理が背後で行われていることをユーザーに知らせることができます。

このようなフィードバックは、ユーザーのストレスを減少させ、良好なユーザー体験を提供する上で非常に有効な手段といえるでしょう。