ldrs/dist/react/Ring.js

Tiny HTML and SVG loaders as web components

import{jsx as e,jsxs as i}from"react/jsx-runtime";import{s as r}from"../style-inject.es-BnTDb6vU.js";var t="Ring_container__QvxQK",a="Ring_inner__0KVri",s="Ring_car__OtED6",n="Ring_track__srvym";function o({size:r=40,color:o="black",speed:_=2,stroke:c=5,bgOpacity:l=0}){const h=parseInt(r+""),f=parseInt(c+""),g=h/2,k=Math.max(0,h/2-f/2);return e("div",{className:t,style:{"--uib-size":r+"px","--uib-color":o,"--uib-speed":_+"s","--uib-bg-opacity":l+""},children:i("svg",{className:a,viewBox:`0 0 ${r} ${r}`,height:r,width:r,children:[e("circle",{className:n,cx:g,cy:g,r:k,pathLength:"100",strokeWidth:`${c}px`,fill:"none"}),e("circle",{className:s,cx:g,cy:g,r:k,pathLength:"100",strokeWidth:`${c}px`,fill:"none"})]})})}r(".Ring_container__QvxQK{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.Ring_container__QvxQK,.Ring_inner__0KVri{height:var(--uib-size);width:var(--uib-size)}.Ring_inner__0KVri{animation:Ring_rotate__BkGeb var(--uib-speed) linear infinite;overflow:visible;transform-origin:center;will-change:transform}.Ring_car__OtED6{stroke:var(--uib-color);stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:Ring_stretch__NViJi calc(var(--uib-speed)*.75) ease-in-out infinite;will-change:stroke-dasharray,stroke-dashoffset}.Ring_car__OtED6,.Ring_track__srvym{fill:none;transition:stroke .5s ease}.Ring_track__srvym{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes Ring_rotate__BkGeb{to{transform:rotate(1turn)}}@keyframes Ring_stretch__NViJi{0%{stroke-dasharray:0,150;stroke-dashoffset:0}50%{stroke-dasharray:75,150;stroke-dashoffset:-25}to{stroke-dashoffset:-99}}");export{o as default};
//# sourceMappingURL=Ring.js.map