回答編集履歴

1

spin.jsについて追記

2015/08/11 15:44

投稿

退会済みユーザー
test CHANGED
@@ -21,3 +21,89 @@
21
21
  </script>
22
22
 
23
23
  ```
24
+
25
+
26
+
27
+ Ajaxの読み込み中は、jQueryを使っているのであれば`ajaxStart()`でAjaxの開始、`/ajaxStop()`Ajaxの終了が取れるので、[spin.js](http://fgnass.github.io/spin.js/)と組み合わせれば簡単にできます。
28
+
29
+
30
+
31
+ ```javascript
32
+
33
+ // スピナー作成
34
+
35
+ var opts = {
36
+
37
+ lines: 13, // 描画する線の数
38
+
39
+ length: 7, // 線の長さ
40
+
41
+ width: 4, // 線の太さ
42
+
43
+ radius: 10, // 内接円の大きさ
44
+
45
+ rotate: 0, // 回転開始のオフセット
46
+
47
+ color: '#efefef', // RGBカラーコード
48
+
49
+ speed: 0.75, // 回転の早さ
50
+
51
+ trail: 50, // 非アクティブ時の透明度
52
+
53
+ shadow: true, // 影の描画
54
+
55
+ hwaccel: false, // ハードウェアアクセラレーションするかどうか?
56
+
57
+ className: 'spinner', // スピナーに適用するCSSクラス
58
+
59
+ zIndex: 2e9, // z-index (defaults to 2000000000)
60
+
61
+ top: 'auto', // 親要素からの位置(縦:px)
62
+
63
+ left: 'auto' // 親要素からの位置(横:px)
64
+
65
+ };
66
+
67
+ var spinner = new Spinner(opts);
68
+
69
+ var ajax_cnt = 0; // AJAXリクエストの並行実行サポート
70
+
71
+
72
+
73
+ // AJAXリクエスト開始時に実行する関数の登録
74
+
75
+ $(document).ajaxStart(function() {
76
+
77
+ $('<div id ="spinner_center" style="position:fixed;top:70px;left:49%;"></div>').appendTo('body');
78
+
79
+ spinner.spin($('#spinner_center')[0]);
80
+
81
+ ajax_cnt++;
82
+
83
+ });
84
+
85
+
86
+
87
+ // AJAXリクエスト終了時に実行する関数の登録
88
+
89
+ $(document).ajaxStop(function() {
90
+
91
+ ajax_cnt--;
92
+
93
+ if (ajax_cnt <= 0) {
94
+
95
+ spinner.stop();
96
+
97
+ $('#spinner_center').remove();
98
+
99
+ ajax_cnt = 0;
100
+
101
+ }
102
+
103
+ });
104
+
105
+ ```
106
+
107
+
108
+
109
+ 引用元: [Show progress spinner on jQuery AJAX requests](http://a32.me/2012/09/show-spinner-on-jquery-ajax-requests/)