ajaxにロード画面を実装

最近ゾンビィみたいな存在になってきてます。

ajax通信でロード画面見せないとやっぱりユーザーに優しくないから実装するのは当たり前だよね(建前)、ということでこんな感じです。


jQuery(function ($) {
	"use strict";
	// JavaScript Document
	$(document).on('イベント発火', function() {
		$.ajax({
			url: '',
			type: 'POST',
			data_type: 'json',
			data: ,
			beforeSend: function(){
				show_loading(true);
			}
		})
		.done(function(data) {
		})
		.fail(function(XMLHttpRequest, textStatus, errorThrown) {
		})
		.always(function(data) {
			show_loading(false);
		});
	});
	function show_loading(flag){
		if(flag){
			$('.loading-wrapper').fadeIn('fast');
		} else {
			$('.loading-wrapper').fadeOut('fast');
		}
	}
});

show_loading()で表示非表示を管理するだけなのですが、じゃあHTMLとCSSはどこやねんというと

 

こちらです

 

何がいいってCSSだけでこんなオサレなアニメーションが使えるって事。作者様ありがとう。