Display loading animation on the visible part of the page center

I have a page with a container with a vertical scroll, and I want to add a loading animation on the visible part of page above the container. I tried div with class:

.loading-animation {
    height:100vh;
    background: url(img/loading.gif) 50% 50% / 100px 100px fixed no-repeat;
}

but it appeared at the bottom of the page, below my container. Then I tried

.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;
}

and this appeared above my container but in the middle of all the page, not the visible area. Any ideas how to achieve this appreciated

Edit1, 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);
    }
}

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>