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