Skip to content

Instantly share code, notes, and snippets.

@yani

yani/index.html

Last active April 13, 2019 12:50
Show Gist options
  • Save yani/631999d799b49f4766b64c042787e1c8 to your computer and use it in GitHub Desktop.
Save yani/631999d799b49f4766b64c042787e1c8 to your computer and use it in GitHub Desktop.
Download ZIP
jquery page loader with datatables support
Raw
index.html
<body>
<div class="wrapper">
<div class="loading" id="_app_loader"></div>
</div>
</body>
Raw
index.js
// Get amount of DataTables on the page
_app_datatableCount = $('table.dataTable').length;
// Hide the app loader if there are no DataTables
if (_app_datatableCount === 0) {
$("#_app_loader").hide();
} else {
// Hide app loader when there are DataTables and they all have been initialized
$('body').on('init.dt', function (e) {
_app_datatableCounter++;
if (_app_datatableCounter === _app_datatableCount) {
$("#_app_loader").hide();
}
});
}
// Show app loader when navigating away
$(window).on("beforeunload", function () {
$("#_app_loader").show();
});
Raw
loader.css
/**
* Single Element CSS-Only Absolute Center Overlay Spinner
* by MattIn4D - https://codepen.io/MattIn4D/pen/LiKFC
*/
/* Absolute Center Spinner */
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
/* hide "loading..." text */
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.loading:not(:required):after {
content: "";
display: block;
font-size: 10px;
width: 1em;
height: 1em;
margin-top: -0.5em;
-webkit-animation: spinner 1500ms infinite linear;
-moz-animation: spinner 1500ms infinite linear;
-ms-animation: spinner 1500ms infinite linear;
-o-animation: spinner 1500ms infinite linear;
animation: spinner 1500ms infinite linear;
border-radius: 0.5em;
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}
Raw
main.css
.wrapper {
height: auto;
min-height: 100%;
position: relative;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment