ldrs
Version:
Tiny HTML and SVG loaders as web components
3 lines (2 loc) • 3 kB
JavaScript
import e from"../lib/LdrsBaseElement.js";var t=':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{filter:url(#uib-jelly-triangle-ooze);height:var(--uib-size);position:relative;width:var(--uib-size)}.container:after,.container:before,.dot{background-color:var(--uib-color);border-radius:100%;content:"";height:33%;position:absolute;transition:background-color .3s ease;width:33%;will-change:transform}.dot{animation:grow var(--uib-speed) ease infinite;left:30%;top:6%}.container:before{animation:grow var(--uib-speed) ease calc(var(--uib-speed)*-.666) infinite;bottom:6%;right:0}.container:after{animation:grow var(--uib-speed) ease calc(var(--uib-speed)*-.333) infinite;bottom:6%;left:0}.traveler{animation:triangulate var(--uib-speed) ease infinite;background-color:var(--uib-color);border-radius:100%;height:33%;left:30%;top:6%;transition:background-color .3s ease;width:33%}.svg,.traveler{position:absolute}.svg{height:0;width:0}@keyframes triangulate{0%,to{transform:none}33.333%{transform:translate(120%,175%)}66.666%{transform:translate(-95%,175%)}}@keyframes grow{0%,85%,to{transform:scale(1.5)}50%,60%{transform:scale(0)}}';class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:30,color:"black",speed:1.75}),this.template.innerHTML=`\n <div\n class="container"\n >\n <div class="dot"></div>\n <div class="traveler"></div>\n </div>\n <svg width="0" height="0" class="svg">\n <defs>\n <filter id="uib-jelly-triangle-ooze">\n <feGaussianBlur\n in="SourceGraphic"\n stdDeviation=${parseInt(this.size)/9}\n result="blur"\n />\n <feColorMatrix\n in="blur"\n mode="matrix"\n values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"\n result="ooze"\n />\n <feBlend in="SourceGraphic" in2="ooze" />\n </filter>\n </defs>\n </svg>\n <style>\n :host{\n --uib-size: ${this.size}px;\n --uib-color: ${this.color};\n --uib-speed: ${this.speed}s;\n }\n ${t}\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 }\n ${t}\n `)}}var s={register:(e="l-jelly-triangle")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
//# sourceMappingURL=jellyTriangle.js.map