ldrs
Version:
Minimalist loading animations for React and web components
3 lines (2 loc) • 1.15 kB
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{s as a}from"../scaleD-CuhdI9fg.js";var s="container_11a954",c="inner_f13ad2",i="car_debdb6",r="track_7916ca";const o=({size:o=40,color:n="black",speed:p=1.4,stroke:l=4,strokeLength:d=.15,bgOpacity:h=.1})=>{const b=parseInt(o+""),g=a(b/50,"M37.2,23.4c0,9.1-4.9,17-12.3,21.2c-3.6,2.1-7.8,3.3-12.3,3.3c-4.5,0-8.6-1.2-12.2-3.3c0-9.1,4.9-16.9,12.3-21.2c3.6-2.1,7.8-3.3,12.2-3.3S33.6,21.3,37.2,23.4c7.3,4.2,12.2,12.1,12.3,21.2c-3.6,2.1-7.8,3.3-12.2,3.3c-4.5,0-8.6-1.2-12.3-3.3c-7.3-4.2-12.2-12.1-12.2-21.2c0-9.1,4.9-17,12.2-21.2C32.3,6.4,37.2,14.3,37.2,23.4z");return e("div",{className:s,style:{"--uib-size":o+"px","--uib-color":n,"--uib-speed":p+"s","--uib-dash":String(100*parseFloat(d+"")),"--uib-gap":String(100-100*parseFloat(d+"")),"--uib-bg-opacity":h+""},children:t("svg",{className:c,x:"0px",y:"0px",viewBox:`0 0 ${o} ${o}`,height:o,width:o,preserveAspectRatio:"xMidYMid meet",children:[e("path",{className:r,strokeWidth:l,fill:"none",pathLength:"100",d:g}),e("path",{className:i,strokeWidth:l,fill:"none",pathLength:"100",d:g})]})})};export{o as default};
//# sourceMappingURL=Trefoil.js.map