ldrs
Version:
Tiny HTML and SVG loaders as web components
3 lines (2 loc) • 3.71 kB
JavaScript
import e from"../lib/LdrsBaseElement.js";var i=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:var(--uib-size);justify-content:flex-start;position:relative;width:var(--uib-size)}.line{align-items:flex-start;display:flex;height:100%;left:calc(50% - var(--uib-stroke)/2);position:absolute;top:0;width:var(--uib-stroke)}.line:before{animation:pulse calc(var(--uib-speed)) ease-in-out infinite;background-color:var(--uib-color);border-radius:calc(var(--uib-stroke)/2);content:"";height:22%;transform-origin:center bottom;transition:background-color .3s ease;width:100%}.line:first-child{transform:rotate(-30deg)}.line:first-child:before{animation-delay:calc(var(--uib-speed)/-12*1)}.line:nth-child(2){transform:rotate(-60deg)}.line:nth-child(2):before{animation-delay:calc(var(--uib-speed)/-12*2)}.line:nth-child(3){transform:rotate(-90deg)}.line:nth-child(3):before{animation-delay:calc(var(--uib-speed)/-12*3)}.line:nth-child(4){transform:rotate(-120deg)}.line:nth-child(4):before{animation-delay:calc(var(--uib-speed)/-12*4)}.line:nth-child(5){transform:rotate(-150deg)}.line:nth-child(5):before{animation-delay:calc(var(--uib-speed)/-12*5)}.line:nth-child(6){transform:rotate(-180deg)}.line:nth-child(6):before{animation-delay:calc(var(--uib-speed)/-12*6)}.line:nth-child(7){transform:rotate(-210deg)}.line:nth-child(7):before{animation-delay:calc(var(--uib-speed)/-12*7)}.line:nth-child(8){transform:rotate(-240deg)}.line:nth-child(8):before{animation-delay:calc(var(--uib-speed)/-12*8)}.line:nth-child(9){transform:rotate(-270deg)}.line:nth-child(9):before{animation-delay:calc(var(--uib-speed)/-12*9)}.line:nth-child(10){transform:rotate(-300deg)}.line:nth-child(10):before{animation-delay:calc(var(--uib-speed)/-12*10)}.line:nth-child(11){transform:rotate(-330deg)}.line:nth-child(11):before{animation-delay:calc(var(--uib-speed)/-12*11)}@keyframes pulse{0%,80%,to{opacity:0;transform:scaleY(.75)}20%{opacity:1;transform:scaleY(1)}}';class t extends e{_attributes=["size","color","speed","stroke"];size;color;speed;stroke;static get observedAttributes(){return["size","color","speed","stroke"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1,stroke:3}),this.template.innerHTML=`\n <div class="container">\n <div class="line"></div>\n <div class="line"></div>\n <div class="line"></div>\n <div class="line"></div>\n <div class="line"></div>\n <div class="line"></div>\n <div class="line"></div>\n <div class="line"></div>\n <div class="line"></div>\n <div class="line"></div>\n <div class="line"></div>\n <div class="line"></div>\n </div>\n <style>\n :host{\n --uib-size: ${this.size}px;\n --uib-color: ${this.color};\n --uib-speed: ${this.speed}s;\n --uib-stroke: ${this.stroke}px;\n }\n ${i}\n </style>\n `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n :host{\n --uib-size: ${this.size}px;\n --uib-color: ${this.color};\n --uib-speed: ${this.speed}s;\n --uib-stroke: ${this.stroke}px;\n }\n ${i}\n `)}}var n={register:(e="l-line-spinner")=>{customElements.get(e)||customElements.define(e,class extends t{})},element:t};export{n as default};
//# sourceMappingURL=lineSpinner.js.map