ajaxの読み込みで使えるクルクル回るスピナーをjavascriptで作れる「Spin.js」

/ ,

Ajaxを使う機能だと、読み込み時間が発生します。

この読み込み中に何も反応がないとユーザーが今何が起こっているのか理解できません。

読み込み中にくるくるとロードを表すGifを表示しておくといいUXだといえます。

 

スポンサーリンク

ローディングのスピナーを使える「spin.js」の使い方

Gif画像を使ってもいいのですが、使う位置によってサイズ感が変わる場合があります。

例えば、画面全体のローディングやモーダルの中ではベストなサイズが違うと思います。

この場合、画像を複数用意する必要があります。

また、背景色が変わった場合、背景色に合わせて画像を変更する必要があります。

サイトのデザインが変わる度に画像をアップロードするのはとてもめんどうですね。

spin.jsを使えばこの問題をすべて解決できます。

 

spin.jsはjavascriptでくるくるを表示させることができ、色や速度など自由にカスタマイズできます。

 

1. spin.jsのファイルを作る

spin.jsというファイルを作成。

spinjsのサイトにアクセスする http://spin.js.org/

spin.min.jsをクリックすると、ソースコードがずらっと出てくるのでコピーして先ほど作成したファイルにコピーしましょう。

 

 

2.プロパティの解説

プロパティの説明

<div id="spin"></div>
 <script>
 var opts = {
 lines: 13, // The number of lines to draw 回転する線の数
 length: 28, // The length of each line 線の長さ
 width: 14, // The line thickness 線の幅
 radius: 42, // The radius of the inner circle 線の中心からの長さ
 scale: 1, // Scales overall size of the spinner 比率を維持したままサイズを拡大・縮小
 corners: 1, // Corner roundness (0..1) 線の丸み(0で四角、1で角丸)
 color: '#000', // #rgb or #rrggbb or array of colors 色
 opacity: 0.25, // Opacity of the lines 透明度
 rotate: 0, // The rotation offset スピナーを回転
 direction: 1, // 1: clockwise, -1: counterclockwise 時計回りか反時計回りか
 speed: 1, // Rounds per second 回転スピード
 trail: 60, // Afterglow percentage 残像
 fps: 20, // Frames per second when using setTimeout() as a fallback for CSS
 zIndex: 2e9, // The z-index (defaults to 2000000000) 重なりの順序
 className: 'spinner', // The CSS class to assign to the spinner スピナーのclass
 top: '50%', // Top position relative to parent 上からの位置
 left: '50%', // Left position relative to parent 左からの位置
 shadow: false, // Whether to render a shadow 影をつけるかつけないか
 hwaccel: false, // Whether to use hardware acceleration ハードウェアアクセラレーションを有効にするか()
 position: 'absolute' // Element positioning CSSのposition
 }
 var target = document.getElementById('spin')
 var spinner = new Spinner(opts).spin(target);
 </script>

 

こんな感じで自由にスピナーをカスタマイズできます。