Question

我有一个页面，用户可以在其中按下按钮来处理数据，这最多需要40秒钟，因此我想制作一个加载页面，我使用了CSS模板，但是我不知道如何更改function chunkArrayInGroups(arr, size) { var newArr=[]; for (var i=0; i < arr.length; i+= size){ newArr.push(arr.slice(i,i+size)); } return newArr; } chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3);调用div以显示我尝试了此操作：

background colour

其中$("#q12").click(function() { $("#q11").show(); $("#content").css("background", "(136,136,136,0.2)"); });是按钮ID，#q12是div（加载动画）ID，而#q11是div，我将页面内容包装在其中，我不能简单地替换正文颜色，因为它不会覆盖内容，因此我可以添加任何动画来隐藏页面，并向用户显示某些东西确实在加载中，因为它很小并且位于页面顶部中心

这是CSS

#content

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

Answer 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>

Answer 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>

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

2 个答案: