ldrs
Version:
Minimalist loading animations for React and web components
3 lines (2 loc) • 815 B
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";var i="container_280160",a="inner_3208c7",r="car_75c452",s="track_7e4d86";const c=({size:c=35,color:n="black",speed:o=1.2,stroke:h=5,strokeLength:l=.25,bgOpacity:p=.1})=>{const d=parseInt(c+""),g=parseInt(h+""),b=g/2,u=Math.max(d-g/2,0);return e("div",{className:i,style:{"--uib-size":c+"px","--uib-color":n,"--uib-speed":o+"s","--uib-dash":String(100*parseFloat(l+"")),"--uib-gap":String(100-100*parseFloat(l+"")),"--uib-bg-opacity":p+""},children:t("svg",{className:a,viewBox:`0 0 ${c} ${c}`,height:c,width:c,children:[e("rect",{className:s,x:b,y:b,fill:"none",strokeWidth:`${h}px`,width:u,height:u}),e("rect",{className:r,x:b,y:b,fill:"none",strokeWidth:`${h}px`,width:u,height:u,pathLength:"100"})]})})};export{c as default};
//# sourceMappingURL=Square.js.map