ldrs/dist/react/TailChase.js

Tiny HTML and SVG loaders as web components

import{jsx as a,jsxs as e}from"react/jsx-runtime";import{s as i}from"../style-inject.es-BnTDb6vU.js";var t="TailChase_container__5giSd",s="TailChase_inner__LjiHU",o="TailChase_dot__OKJ5s";function l({size:i=40,color:l="black",speed:n=1.5}){return a("div",{className:t,style:{"--uib-size":i+"px","--uib-color":l,"--uib-speed":n+"s"},children:e("div",{className:s,children:[a("div",{className:o}),a("div",{className:o}),a("div",{className:o}),a("div",{className:o}),a("div",{className:o}),a("div",{className:o})]})})}i('.TailChase_container__5giSd{display:inline-flex;flex-shrink:0;justify-content:center}.TailChase_container__5giSd,.TailChase_inner__LjiHU{align-items:center;height:var(--uib-size);width:var(--uib-size)}.TailChase_inner__LjiHU{--dot-size:calc(var(--uib-size)*0.17);animation:TailChase_smoothRotate__jdRmC calc(var(--uib-speed)*1.8) linear infinite;display:flex;justify-content:flex-start;position:relative}.TailChase_dot__OKJ5s{align-items:flex-start;animation:TailChase_rotate__8ibcr var(--uib-speed) ease-in-out infinite;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.TailChase_dot__OKJ5s:before{background-color:var(--uib-color);border-radius:50%;content:"";height:var(--dot-size);transition:background-color .3s ease;width:var(--dot-size)}.TailChase_dot__OKJ5s:nth-child(2),.TailChase_dot__OKJ5s:nth-child(2):before{animation-delay:calc(var(--uib-speed)*-.835*.5)}.TailChase_dot__OKJ5s:nth-child(3),.TailChase_dot__OKJ5s:nth-child(3):before{animation-delay:calc(var(--uib-speed)*-.668*.5)}.TailChase_dot__OKJ5s:nth-child(4),.TailChase_dot__OKJ5s:nth-child(4):before{animation-delay:calc(var(--uib-speed)*-.501*.5)}.TailChase_dot__OKJ5s:nth-child(5),.TailChase_dot__OKJ5s:nth-child(5):before{animation-delay:calc(var(--uib-speed)*-.334*.5)}.TailChase_dot__OKJ5s:nth-child(6),.TailChase_dot__OKJ5s:nth-child(6):before{animation-delay:calc(var(--uib-speed)*-.167*.5)}@keyframes TailChase_rotate__8ibcr{0%{transform:rotate(0deg)}65%,to{transform:rotate(1turn)}}@keyframes TailChase_smoothRotate__jdRmC{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}');export{l as default};
//# sourceMappingURL=TailChase.js.map