用带有 css 和 javascript 的页面加载器覆盖整个身体？答案

【问题标题】：covering the whole body with page loader with css and javascript?用带有 css 和 javascript 的页面加载器覆盖整个身体？
【发布时间】：2019-08-22 02:43:46
【问题描述】：

我有一个页面，用户按下按钮来处理数据，这需要 40 秒，所以我想制作一个加载页面我使用 CSS 模板但我不知道如何更改 background colour 调用div 显示我试过这个：

$("#q12").click(function() {
  $("#q11").show();
  $("#content").css("background", "(136,136,136,0.2)");
});

#q12 是按钮 ID，#q11 是 div（加载动画）ID，#content 是我包装页面内容的 div，我不能简单地替换正文颜色不会覆盖内容，所以我可以在动画中添加什么来隐藏页面并向用户显示某些内容确实正在加载，因为它很小并且位于页面的顶部中心

这是 CSS

#content{

margin-top : 4%;
margin-left : 18%;
margin-right : 2%;
margin-bottom : 6%;

}
.loading{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 70px;
  display: flex;
  align-items: center;
}
.obj{
  width: 9px;
  height: 70px;
  background: white;
  margin: 0 3px;
  border-radius: 15px;
  animation: loading 0.8s infinite;
}
.obj:nth-child(2){
  animation-delay: 0.1s;
}
.obj:nth-child(3){
  animation-delay: 0.2s;
}
.obj:nth-child(4){
  animation-delay: 0.3s;
}
.obj:nth-child(5){
  animation-delay: 0.4s;
}
.obj:nth-child(6){
  animation-delay: 0.5s;
}
.obj:nth-child(7){
  animation-delay: 0.6s;
}
.obj:nth-child(8){
  animation-delay: 0.7s;
}


@keyframes loading {
  0%{
    height: 0;
  }
  50%{
    height: 70px;
  }
  100%{
    height: 0;
  }
}

我之前从未做过预加载器或加载屏幕，当我查看示例时，它们只显示纯 CSS 而不是它的调用方式。

【问题讨论】：

标签： javascript html css

【解决方案1】：

这是你需要的吗？

$("#q12").click(function() {
  $("#q11").show();
});

.page-wrapper {
  height: 300px;
  width: 100%;
  background: yellow;
}

#content {
  height: 200px;
  width: 200px;
  background: white;
  margin-top: 4%;
  margin-left: 18%;
  margin-right: 2%;
  margin-bottom: 6%;
  text-align: center;
}

#q11 {
  display: none;
  background-color: rgba(136, 136, 136, 0.2);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70px;
  display: flex;
  align-items: center;
}

.obj {
  width: 9px;
  height: 70px;
  background: white;
  margin: 0 3px;
  border-radius: 15px;
  animation: loading 0.8s infinite;
}

.obj:nth-child(2) {
  animation-delay: 0.1s;
}

.obj:nth-child(3) {
  animation-delay: 0.2s;
}

.obj:nth-child(4) {
  animation-delay: 0.3s;
}

.obj:nth-child(5) {
  animation-delay: 0.4s;
}

.obj:nth-child(6) {
  animation-delay: 0.5s;
}

.obj:nth-child(7) {
  animation-delay: 0.6s;
}

.obj:nth-child(8) {
  animation-delay: 0.7s;
}

@keyframes loading {
  0% {
    height: 0;
  }
  50% {
    height: 70px;
  }
  100% {
    height: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="page-wrapper">
    <div id="content">
     content goes here
    </div>
    <button id="q12">Submit</button>
  </div>


  <!--     place at the end of body -->
  <div id="q11">
    <div class="loading">

      <div class="obj">

      </div>
    </div>
  </div>
</body>

【讨论】：

感谢您的帮助，但 JavaScript 代码只能从控制台运行。我的意思是，我必须在控制台中运行它才能工作。

【解决方案2】：

(136,136,136,0.2) 不是 background 的有效属性，但 rgba(136,136,136,0.2) 是。

<script>
  $("#q12").click(function() {
    $("#q11").show();
    $("#content").css("background", "rgba(136,136,136,0.2)");
  });
</script>

【讨论】：

但这并没有覆盖我想要隐藏页面中的所有内容并仅显示加载程序的内容。感谢您的帮助。