ldrs/dist/react/Tailspin.js

Tiny HTML and SVG loaders as web components

import{jsx as i}from"react/jsx-runtime";import{s as a}from"../style-inject.es-BnTDb6vU.js";var e="Tailspin_container__RHaSC",r="Tailspin_inner__NLAHh";function n({size:a=40,color:n="black",speed:s=.9,stroke:t=5}){return i("div",{className:e,style:{"--uib-size":a+"px","--uib-color":n,"--uib-speed":s+"s","--uib-stroke":t+"px"},children:i("div",{className:r})})}a(".Tailspin_container__RHaSC{display:inline-flex;flex-shrink:0;justify-content:center}.Tailspin_container__RHaSC,.Tailspin_inner__NLAHh{align-items:center;height:var(--uib-size);width:var(--uib-size)}.Tailspin_inner__NLAHh{--mask-size:calc(var(--uib-size)/2 - var(--uib-stroke));animation:Tailspin_spin__NSOvg calc(var(--uib-speed)) linear infinite;background-image:conic-gradient(transparent 25%,var(--uib-color));border-radius:50%;display:flex;justify-content:flex-start;-webkit-mask:radial-gradient(circle var(--mask-size),transparent 99%,#000 100%);mask:radial-gradient(circle var(--mask-size),transparent 99%,#000 100%);position:relative}@keyframes Tailspin_spin__NSOvg{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}");export{n as default};
//# sourceMappingURL=Tailspin.js.map