在页面中心的可见部分显示加载动画。

Question

我有一个带有垂直滚动的容器的页面，我想在容器上方的页面可见部分添加一个加载动画。我在课堂上试过：

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

但它出现在页面底部，在我的容器下面。然后我试着

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

这个出现在我的容器上方，但在整个页面的中间，而不是可见区域。对如何实现这一点有何想法？

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模板(使用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>

Answer 1

这是小提琴

css

.maindiv{
 position: relative;
}
.loader
{
  position:absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10;
   background: rgba(0,0,0,0.5);
}
.loader span
{
  height:30px;
  width:100px;
  padding:10px;
  margin:auto;
  top:0px;
  right:0px;
  left:0px;
  bottom:0px;
  position:absolute;
  background:#ddd;

}
.scrolldiv
{
  height:200px;
  overflow:auto;

}

HTMl

    <div class="maindiv">
    <div class=loader>
          <span>Loading</span>
    </div>
    <div class="scrolldiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
</div>