Skip to content

Instantly share code, notes, and snippets.

@adamcrampton
Created May 7, 2020 23:59
Show Gist options
  • Save adamcrampton/caa2434ea75068d300ce06d216438a54 to your computer and use it in GitHub Desktop.
Save adamcrampton/caa2434ea75068d300ce06d216438a54 to your computer and use it in GitHub Desktop.
Full page CSS spinner useful for pages with AJAX
<div class="loading hidden"><i class="fa fa-spin fa-circle-o-notch" style="font-size: 48px;"></i></div>
<script type="text/javascript">
const formData = new FormData();
formData.append('key', 'value');
$.ajax({
async: true,
contentType: false,
processData: false,
url: '/some-endpoint',
method: 'POST',
data: formData,
beforeSend: function(jqXHR, settings) {
$('div.loading').removeClass('hidden');
},
error: function(jqXHR, textStatus, errorThrown) {
// Handle error
},
success: function(data, textStatus, jqXHR) {
// Process data
},
complete: function() {
$('div.loading').addClass('hidden');
}
});
</script>
<style>
/* Absolute Center Spinner */
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: visible;
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);
}
/* Animation */
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment