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

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，则不会渲染包含class loader的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 { 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; }