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

Question

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

.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

这里是fiddle

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>