如何居中加載動畫並使頁面的其余部分像燈箱效果一樣？

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; }