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

Question

I have the below loader 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 looks like this (from vuejs template):

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

If showloader is false, the div containing class loader will not be rendered. If showloader becomes true this div will be rendered. So this is dynamically tied to showloader variable value.

Javascript looks like this:

var showloader = false;

function doSomething() {
   showloader = true;

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

}

doSomething();

The main page has top nav bar with various buttons(not shown in HTML). When showloader is true, user should not be able to interact with page like a lightbox effect where page is seen through transparent background. Also how to center loading animation in the browser viewport?

I spent several hours on this but no luck.

Answer 1

You could nest the animating element inside a div . You can then apply the modal properties to the 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 class should be something like below to be right in the middle of the page:

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