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>

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

1 个答案: