Question

我有以下加载程序CSS：

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;       
  position: absolute;
  margin: auto;
  top:-90px;
  bottom:0;
  right:0;
  left:0;   
  z-index:1020;
  overflow: auto;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

HTML看起来像这样（来自vuejs模板）：

<template>
  <div class="container">
    <div class="row">
      <div  class=" mx-auto col-sm-8">
        <section>
          <div v-if="showloader" class="loader"></div>
        </section>           
      </div>
    </div>
  </div>
</template>

如果showloader为false，则不会渲染包含类加载器的div。如果showloader变为true，则将渲染此div。因此，它与showloader变量值动态相关。

JavaScript看起来像这样：

var showloader = false;

function doSomething() {
   showloader = true;

   setTimeout(function(){ 
   showloader = false;
   alert("Hello"); 
  }, 3000);

}

doSomething();

主页的顶部导航栏带有各种按钮（HTML中未显示）。当showloader为true时，用户不应像通过透明背景看到页面的灯箱效果那样与页面进行交互。还有如何在浏览器视口中居中加载动画？

我花了几个小时，但没有运气。

Answer 1

您可以将动画元素嵌套在div中。然后，您可以将模态属性应用于div。

.loader {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1020;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .85);
}

.loader span {
  display: block;
  border: 16px solid #f3f3f3;
  /* Light grey */
  border-top: 16px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;
}

<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit quae voluptas, saepe eum optio deleniti sint autem illum distinctio eos voluptatem hic ab illo, est consequatur nihil consectetur ratione aliquam?</article>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit quae voluptas, saepe eum optio deleniti sint autem illum distinctio eos voluptatem hic ab illo, est consequatur nihil consectetur ratione aliquam?</article>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit quae voluptas, saepe eum optio deleniti sint autem illum distinctio eos voluptatem hic ab illo, est consequatur nihil consectetur ratione aliquam?</article>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit quae voluptas, saepe eum optio deleniti sint autem illum distinctio eos voluptatem hic ab illo, est consequatur nihil consectetur ratione aliquam?</article>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit quae voluptas, saepe eum optio deleniti sint autem illum distinctio eos voluptatem hic ab illo, est consequatur nihil consectetur ratione aliquam?</article>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit quae voluptas, saepe eum optio deleniti sint autem illum distinctio eos voluptatem hic ab illo, est consequatur nihil consectetur ratione aliquam?</article>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit quae voluptas, saepe eum optio deleniti sint autem illum distinctio eos voluptatem hic ab illo, est consequatur nihil consectetur ratione aliquam?</article>
<div class="loader"><span></span></div>

Answer 2

loader类应该类似于以下内容，位于页面中间：

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: calc(50vh - 40px); 
    left: calc(50vw - 40px);
    z-index:1020;
    overflow: auto;
}

如何居中加载动画并使页面的其余部分像灯箱效果一样？

2 个答案: