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>
こんな感じで自由にスピナーをカスタマイズできます。