code added
This commit is contained in:
+162
@@ -0,0 +1,162 @@
|
||||
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:5px solid #ebebeb;
|
||||
border-bottom-color:black;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
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 style="
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width:40px;
|
||||
display:none;
|
||||
">
|
||||
|
||||
<span>
|
||||
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 116.31" style="enable-background:new 0 0 122.88 116.31" xml:space="preserve"><g><path d="M4.06,12.67C1.87,12.67,0,10.8,0,8.51c0-2.19,1.87-4.06,4.06-4.06h5.62c0.1,0,0.31,0,0.42,0c3.75,0.1,7.08,0.83,9.88,2.6 c3.12,1.98,5.41,4.99,6.66,9.47c0,0.1,0,0.21,0.1,0.31L27.78,21h2.34V4.12c0-2.27,1.85-4.12,4.12-4.12h21.67 c2.27,0,4.12,1.85,4.12,4.12v10.02c3.42-3.41,8.06-5.5,13.18-5.5c2.22,0,4.36,0.4,6.34,1.12c4.08-4.33,9.87-7.04,16.29-7.04 c10.96,0,20.07,7.88,21.99,18.28h0.99c2.29,0,4.06,1.87,4.06,4.06c0,0.42-0.11,0.83-0.21,1.25l-10.61,42.76 c-0.42,1.87-2.08,3.12-3.95,3.12l0,0H41.51c1.46,5.41,2.91,8.32,4.89,9.68c2.39,1.56,6.56,1.66,13.53,1.56h0.1l0,0h47.03 c2.29,0,4.06,1.87,4.06,4.06c0,2.29-1.87,4.06-4.06,4.06H60.04l0,0c-8.64,0.1-13.94-0.1-18.21-2.91 c-4.37-2.91-6.66-7.91-8.95-16.96l0,0L18.94,18.92c0-0.1,0-0.1-0.1-0.21c-0.62-2.29-1.66-3.85-3.12-4.68 c-1.46-0.94-3.43-1.35-5.72-1.35c-0.1,0-0.21,0-0.31,0H4.06L4.06,12.67L4.06,12.67z M84.38,37.69c0-1.28,1.27-2.32,2.83-2.32 c1.56,0,2.83,1.04,2.83,2.32v15.69c0,1.28-1.27,2.32-2.83,2.32c-1.56,0-2.83-1.04-2.83-2.32V37.69L84.38,37.69z M67.43,37.69 c0-1.28,1.27-2.32,2.83-2.32c1.56,0,2.83,1.04,2.83,2.32v15.69c0,1.28-1.27,2.32-2.83,2.32c-1.56,0-2.83-1.04-2.83-2.32V37.69 L67.43,37.69z M50.49,37.69c0-1.28,1.27-2.32,2.83-2.32c1.56,0,2.83,1.04,2.83,2.32v15.69c0,1.28-1.27,2.32-2.83,2.32 c-1.56,0-2.83-1.04-2.83-2.32V37.69L50.49,37.69z M85.57,13.37c2.31,2.05,4.14,4.66,5.29,7.63h19.85 c-1.68-6.65-7.7-11.58-14.87-11.58C91.89,9.42,88.29,10.91,85.57,13.37L85.57,13.37z M92.21,29.11L92.21,29.11l-38.01,0l0,0H30.07 l0,0l9.26,34.86h65.65l8.63-34.86H92.21L92.21,29.11z M55.31,21c0.11-0.29,0.23-0.57,0.35-0.85V7.2c0-1.64-1.35-2.99-2.99-2.99 H37.71c-1.64,0-2.99,1.34-2.99,2.99V21H55.31L55.31,21z M94.89,96.33c5.52,0,9.99,4.47,9.99,9.99s-4.47,9.99-9.99,9.99 c-5.51,0-9.99-4.47-9.99-9.99S89.38,96.33,94.89,96.33L94.89,96.33L94.89,96.33z M51.09,96.33c5.51,0,9.99,4.47,9.99,9.99 s-4.47,9.99-9.99,9.99s-9.99-4.47-9.99-9.99S45.57,96.33,51.09,96.33L51.09,96.33L51.09,96.33z"/></g>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="authloaderanwi">
|
||||
<div class='loader' id='lrd1'></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`
|
||||
|
||||
class AuthLoader extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
console.log(this.payment);
|
||||
this._shadowRoot = this.attachShadow({ 'mode': 'open' });
|
||||
this._shadowRoot.appendChild(template.content.cloneNode(true));
|
||||
this.show();
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
return ['payment'];
|
||||
}
|
||||
|
||||
// define getters and setters for attributes
|
||||
get payment() {
|
||||
return this.getAttribute('payment');
|
||||
}
|
||||
|
||||
set payment(val) {
|
||||
if (val) {
|
||||
this.setAttribute('payment', val);
|
||||
} else {
|
||||
this.removeAttribute('payment');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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);
|
||||
Reference in New Issue
Block a user