UNPKG

ldrs

Version:

Tiny HTML and SVG loaders as web components

3 lines (2 loc) 1.57 kB
import{jsx as i,jsxs as e}from"react/jsx-runtime";import{s as r}from"../style-inject.es-BnTDb6vU.js";var t="Ring2_container__qCXLB",n="Ring2_inner__wsHWk",a="Ring2_car__E84LL",s="Ring2_track__xaJA9";function o({size:r=40,color:o="black",speed:c=.8,stroke:l=5,strokeLength:_=.25,bgOpacity:g=.1}){const p=parseInt(r+""),h=parseInt(l+""),u=p/2,b=Math.max(0,p/2-h/2);return i("div",{className:t,style:{"--uib-size":r+"px","--uib-color":o,"--uib-speed":c+"s","--uib-dash":String(100*parseFloat(_+"")),"--uib-gap":String(100-100*parseFloat(_+"")),"--uib-bg-opacity":g+""},children:e("svg",{className:n,viewBox:`${u} ${u} ${r} ${r}`,height:r,width:r,children:[i("circle",{className:s,cx:r,cy:r,r:b,pathLength:"100",strokeWidth:`${l}px`,fill:"none"}),i("circle",{className:a,cx:r,cy:r,r:b,pathLength:"100",strokeWidth:`${l}px`,fill:"none"})]})})}r(".Ring2_container__qCXLB{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.Ring2_container__qCXLB,.Ring2_inner__wsHWk{height:var(--uib-size);width:var(--uib-size)}.Ring2_inner__wsHWk{animation:Ring2_rotate__-MBW8 var(--uib-speed) linear infinite;overflow:visible;transform-origin:center;will-change:transform}.Ring2_car__E84LL{fill:none;stroke:var(--uib-color);stroke-dasharray:var(--uib-dash),var(--uib-gap);stroke-dashoffset:0;stroke-linecap:round;transition:stroke .5s ease}.Ring2_track__xaJA9{fill:none;stroke:var(--uib-color);opacity:var(--uib-bg-opacity);transition:stroke .5s ease}@keyframes Ring2_rotate__-MBW8{to{transform:rotate(1turn)}}");export{o as default}; //# sourceMappingURL=Ring2.js.map