Is there a way to add a loading animation on the visible part of a page with a container that has a vertical scroll? I've tried using a div with class:
.loading-animation {
height:100vh;
background: url(img/loading.gif) 50% 50% / 100px 100px fixed no-repeat;
}
However, the animation appeared at the bottom of the page instead of above the container. Then, I attempted:
.loading-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: url('img/loading.gif') 50% 50% / 100px 100px no-repeat;
}
This solution placed the animation above the container but in the middle of the entire page rather than the visible area. Any suggestions on how to make this work would be greatly appreciated.
Edit1, Using Javascript:
var loading_animation;
function showLoadingAnimationModal() {
loading_animation = document.createElement("div");
loading_animation.style.cursor = "progress";
loading_animation.className = "loading-animation";
document.body.appendChild(loading_animation);
}
function hideLoadingAnimationModal() {
if (loading_animation.parentNode == document.body) {
document.body.removeChild(loading_animation);
}
}
Here is an HTML template (using emberjs):
<script type="text/x-handlebars">
<div align="center">
{{outlet}}
{{#if errorMessage}}
<div class="alert alert-danger" role="alert">
{{errorMessage}}
</div>
{{/if}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="login">
<div class="container">
<!--skipped elements-->
</div>
</script>