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

我有以下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模板）：

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

---

我花了几个小时在这上面，但没有运气

可以将动画元素嵌套在

div

中。然后可以将模态属性应用于

div

.loader{
位置：固定；
排名：0；
底部：0；
右：0；
左：0；
z指数：1020；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：rgba（0,0,0,85）；
}
.装载机跨度{
显示：块；
边框：16px实心#F3；
/*浅灰色*/
边框顶部：16px实心#3498db；
/*蓝色的*/
边界半径：50%；
宽度：80px；
高度：80px；
动画：旋转2s线性无限；
}

Lorem ipsum door sit amet，concetetur adipsicing elit。如果是自愿的，那么你是否有权选择将其与自然光区分开来，这是否是合理的连续性？
Lorem ipsum dolor sit amet，奉献精英。如果是自愿的，那么你是否有权选择将其与自然光区分开来，这是否是合理的连续性？
Lorem ipsum dolor sit amet，奉献精英。如果是自愿的，那么你是否有权选择将其与自然光区分开来，这是否是合理的连续性？
Lorem ipsum dolor sit amet，奉献精英。如果是自愿的，那么你是否有权选择将其与自然光区分开来，这是否是合理的连续性？
Lorem ipsum dolor sit amet，奉献精英。如果是自愿的，那么你是否有权选择将其与自然光区分开来，这是否是合理的连续性？
Lorem ipsum dolor sit amet，奉献精英。如果是自愿的，那么你是否有权选择将其与自然光区分开来，这是否是合理的连续性？
Lorem ipsum dolor sit amet，奉献精英。如果是自愿的，那么你是否有权选择将其与自然光区分开来，这是否是合理的连续性？
<代码> > P>加载程序类应该在页面的中间部分是正确的：


.loader{
边框：16px实心#F3；/*浅灰色*/
边框顶部：16px实心#3498db；/*蓝色*/
边界半径：50%；
宽度：80px；
高度：80px；
动画：旋转2s线性无限；
位置：绝对位置；
顶部：计算（50vh-40px）；
左：计算（50vw-40px）；
z指数：1020；
溢出：自动；
}
<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>

var showloader = false;

function doSomething() {
   showloader = true;

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

}

doSomething();