anwi_website/dist/Js/components/authloader/authloader.js

const template = document.createElement('template');

template.innerHTML = `
<style>
.authloaderanwi {
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrap{
    position:absolute;
    left:50%;
    width:5em;
    height:5em;
    top:20%;
    transform: translate(-50%,-50%);
  }
  
  .loader{
      transition: all 0.7s ease-in-out;
  
    border:10px solid #ebebeb;
    border-bottom-color:#26B8BF;
    width: 100px;
    height: 100px;
    border-radius:50%;
    -webkit-font-smoothing: antialiased !important;
    margin:30px 0px;
  }
  
  #lrd1{
      -webkit-animation: spin1 0.5s linear infinite;
  
  }
  #lrd2{
      -webkit-animation: spin2 3s ease-in-out infinite;
  
  }
  #lrd3{
      -webkit-animation: spin3 15s ease-in-out infinite;
  
  }
  
  @keyframes spin1{
    0% {
      transform: rotate(0deg);    
    }
  
  
    100% {
      transform: rotate(360deg); 
    }
  
  }
  @keyframes spin2{
    0% {
      transform: rotate(0deg);    
    }
    50% {
      transform: rotate(1020deg);    
    }
    
    
    100% {
      transform: rotate(720deg); 
    }
  }
  
  @keyframes spin3{
    0% {
      transform: rotate(0deg);    
    }
    40% {
      transform: rotate(1070deg);    
    }
    
    
    100% {
      transform: rotate(6119deg);
      border-bottom-color:#072426 !important;
    }
  }
  
.authloaderanwi {
    height: 100vh;
}


.overlayanwiAuth{
    width:100vw;
    height:100vh;
    background:white;
    position:fixed;
    top:0;
    right:0;
    z-index:99999;
    display:none;
}

</style>
  <div class="overlayanwiAuth ">
  

<div class="authloaderanwi">
<div class='loader' id='lrd1'></div>
</div>

  </div>
`

class AuthLoader extends HTMLElement {
    constructor() {
      super();
      this._shadowRoot = this.attachShadow({ 'mode': 'open' });
      this._shadowRoot.appendChild(template.content.cloneNode(true));
    }
    

    show(){
        // $('.overlayanwiAuth').css('display','block');
        this._shadowRoot.querySelector('.overlayanwiAuth').style.display = "block";
    }

    hide(){
        // $('.overlayanwiAuth').addClass('display','none');
        this._shadowRoot.querySelector('.overlayanwiAuth').style.display = "none";
    }
}

window.customElements.define('auth-loader', AuthLoader);