ldrs/dist/react/Jelly.js

Tiny HTML and SVG loaders as web components

import{jsx as e,jsxs as i}from"react/jsx-runtime";import{s as l}from"../style-inject.es-BnTDb6vU.js";var t="Jelly_container__fXGOf",r="Jelly_inner__-5HNM",a="Jelly_svg__o5aLh",s="Jelly_dot__XG6U9";function n({size:l=40,color:n="black",speed:o=.9}){const c=parseInt(l+""),f=c/2;return e("div",{className:t,style:{"--uib-size":l+"px","--uib-color":n,"--uib-speed":o+"s"},children:e("div",{className:r,children:i("svg",{className:a,x:"0px",y:"0px",viewBox:`0 0 ${l} ${f}`,height:f,width:l,preserveAspectRatio:"xMidYMid meet",children:[e("circle",{className:s}),e("circle",{className:s}),e("defs",{children:i("filter",{id:"uib-jelly-filter",children:[e("feGaussianBlur",{in:"SourceGraphic",stdDeviation:c/8,result:"blur"}),e("feColorMatrix",{in:"blur",mode:"matrix",values:"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7",result:"ooze"}),e("feBlend",{in:"SourceGraphic",in2:"ooze"})]})})]})})})}l(".Jelly_container__fXGOf{--uib-dot-size:calc(var(--uib-size)/2);align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}.Jelly_inner__-5HNM{align-items:center;animation:Jelly_rotate__u8UOv calc(var(--uib-speed)*2) linear infinite;display:flex;height:calc(var(--uib-size)/2);justify-content:space-between;position:relative;width:var(--uib-size);will-change:transform}.Jelly_svg__o5aLh{filter:url(#uib-jelly-filter);overflow:visible}.Jelly_dot__XG6U9{cy:50%;cx:50%;r:calc(var(--uib-dot-size)/2);fill:var(--uib-color);display:block;transform-box:fill-box;transform-origin:center;transition:fill .3s ease;will-change:transform}.Jelly_dot__XG6U9:first-child{animation:Jelly_shift-left__1t-UB var(--uib-speed) ease infinite}.Jelly_dot__XG6U9:nth-child(2){animation:Jelly_shift-right__Ed9r5 var(--uib-speed) ease infinite}@keyframes Jelly_rotate__u8UOv{0%,49.999%,to{transform:none}50%,99.999%{transform:rotate(90deg)}}@keyframes Jelly_shift-left__1t-UB{0%,to{transform:scale(1) translateX(0)}50%{transform:scale(.65) translateX(-75%)}}@keyframes Jelly_shift-right__Ed9r5{0%,to{transform:scale(1) translateX(0)}50%{transform:scale(.65) translateX(75%)}}");export{n as default};
//# sourceMappingURL=Jelly.js.map