ldrs/dist/elements/jelly.js

Tiny HTML and SVG loaders as web components

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{animation:rotate calc(var(--uib-speed)*2) linear infinite;filter:url(#uib-jelly-ooze);height:calc(var(--uib-size)/2);position:relative;width:var(--uib-size);will-change:transform}.container:after,.container:before{background-color:var(--uib-color);border-radius:100%;content:"";height:100%;left:25%;position:absolute;top:0;transition:background-color .3s ease;width:50%;will-change:transform}.container:before{animation:shift-left var(--uib-speed) ease infinite}.container:after{animation:shift-right var(--uib-speed) ease infinite}.svg{height:0;position:absolute;width:0}@keyframes rotate{0%,49.999%,to{transform:none}50%,99.999%{transform:rotate(90deg)}}@keyframes shift-left{0%,to{transform:translateX(0)}50%{transform:scale(.65) translateX(-75%)}}@keyframes shift-right{0%,to{transform:translateX(0)}50%{transform:scale(.65) translateX(75%)}}';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:40,color:"black",speed:.9}),this.template.innerHTML=`\n      <div\n        class="container"\n      ></div>\n      <svg width="0" height="0" class="svg">\n        <defs>\n          <filter id="uib-jelly-ooze">\n            <feGaussianBlur\n              in="SourceGraphic"\n              stdDeviation=${parseInt(this.size)/8}\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")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
//# sourceMappingURL=jelly.js.map