ldrs
Version:
Tiny HTML and SVG loaders as web components
3 lines (2 loc) • 2.74 kB
JavaScript
import{jsx as e,jsxs as i}from"react/jsx-runtime";import{s as l}from"../style-inject.es-BnTDb6vU.js";var r="JellyTriangle_container__8U5rc",a="JellyTriangle_inner__YqSoe",n="JellyTriangle_svg__JQm5n",s="JellyTriangle_dot__iGdUE",t="JellyTriangle_traveler__FLCK1";function c({size:l=30,color:c="black",speed:o=1.75}){const _=parseInt(l+"");return e("div",{className:r,style:{"--uib-size":l+"px","--uib-color":c,"--uib-speed":o+"s"},children:e("div",{className:a,children:i("svg",{className:n,x:"0px",y:"0px",viewBox:`0 0 ${l} ${l}`,height:l,width:l,preserveAspectRatio:"xMidYMid meet",children:[e("circle",{className:s}),e("circle",{className:s}),e("circle",{className:s}),e("circle",{className:t}),e("defs",{children:i("filter",{id:"uib-jelly-triangle-filter",children:[e("feGaussianBlur",{in:"SourceGraphic",stdDeviation:_/9,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(".JellyTriangle_container__8U5rc{--uib-dot-size:calc(var(--uib-size)/3);display:inline-flex;flex-shrink:0;justify-content:center}.JellyTriangle_container__8U5rc,.JellyTriangle_inner__YqSoe{align-items:center;height:var(--uib-size);width:var(--uib-size)}.JellyTriangle_inner__YqSoe{display:flex;justify-content:space-between;position:relative}.JellyTriangle_svg__JQm5n{filter:url(#uib-jelly-triangle-filter);overflow:visible}.JellyTriangle_dot__iGdUE,.JellyTriangle_traveler__FLCK1{fill:var(--uib-color);r:calc(var(--uib-dot-size)/2);display:block;transform-box:fill-box;transform-origin:center;transition:fill .3s ease;will-change:transform}.JellyTriangle_dot__iGdUE:first-child{cy:calc(var(--uib-dot-size)/2);cx:calc(var(--uib-size)/2);animation:JellyTriangle_grow__rCTVa var(--uib-speed) ease infinite}.JellyTriangle_dot__iGdUE:nth-child(2){cy:calc(var(--uib-size) - var(--uib-dot-size)/2);cx:calc(var(--uib-size) - var(--uib-dot-size)/2);animation:JellyTriangle_grow__rCTVa var(--uib-speed) ease calc(var(--uib-speed)*-.666) infinite}.JellyTriangle_dot__iGdUE:nth-child(3){cy:calc(var(--uib-size) - var(--uib-dot-size)/2);cx:calc(var(--uib-dot-size)/2);animation:JellyTriangle_grow__rCTVa var(--uib-speed) ease calc(var(--uib-speed)*-.333) infinite}.JellyTriangle_traveler__FLCK1{cy:calc(var(--uib-dot-size)/2);cx:calc(var(--uib-size)/2);animation:JellyTriangle_triangulate__Vvpoi var(--uib-speed) ease infinite}@keyframes JellyTriangle_triangulate__Vvpoi{0%,to{transform:none}33.333%{transform:translate(100%,200%)}66.666%{transform:translate(-100%,200%)}}@keyframes JellyTriangle_grow__rCTVa{0%,85%,to{transform:scale(1.5)}50%,60%{transform:scale(0)}}");export{c as default};
//# sourceMappingURL=JellyTriangle.js.map