Javascript - Toggling a loading screen with jQuery ajax

toggle-ajax-loading.css

.loading-container {
	position:absolute;
	top:0;
 	right:0;
	bottom:0;
	left:0;
	display:none;
}
.loading-container:before {
	position:absolute;
	top:50%;
	left:50%;
	display:block;
	width:100px;
	height:100px;
	line-height:100px;
	margin:-50px 0 0 -50px;
	color:#fff;
	text-align:center;
	background:rgba(0,0,0,.9);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	content: 'loading...';
}

toggle-ajax-loading.html

<div id="loading-container" class="loading-container"></div>
<div id="content-container" class="content-container"></div>

toggle-ajax-loading.js

$(function () {
  
  // Toggle loading container when ajax call
  var loadingContainer = $('#loading-container', this.el);
  loadingContainer.ajaxStart(function () {
    loadingContainer.show();
  });
  loadingContainer.ajaxStop(function () {
    loadingContainer.hide();
  });
  
  // Ajax call
  $.getJSON('https://api.github.com/users/maxparm', function (response) {
    $('#content-container').html('Response ajax call: ' + response.name);
  });
});

Would be cool to have a demo