.

dist/Js/components/authloader/authloader.js

@@ -0,0 +1,130 @@
+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);