I need a way to display a loading animation when I navigate between pages on my website. To achieve this, I have added the following HTML code for the loader:
<div class="ajax-loader"><i class="icon-spin5"></i></div>
And here is the CSS code for styling the loader:
.ajax-loader {
z-index: 1;
position: fixed;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
color: white;
opacity: 0;
pointer-events: none;
transition: all ease-in-out .25s;
i {
display: inline-block;
font-size: 80px;
width: 80px;
height: 80px;
animation: spin 3s linear infinite;
@media @step1, @step2 {
font-size: 2em;
}
}
&.active {
opacity: 1;
}
}
In addition, here is the JavaScript code that controls the loader:
$(document).ready(function() {
// Show loader when changing pages
window.onbeforeunload = function(e) {
// Display ajax loader
$('.ajax-loader').addClass('active');
};
});
Everything works as expected in Internet Explorer, Firefox, and Chrome, but not in Safari (on Mac and iOS).
Does anyone have any suggestions or ideas to address this issue? Thank you!