reeling/dist/index.js

A React loading indicator inspired by curated cinema

import{css as z}from"@emotion/react";import{useEffect as C,useState as b,useRef as v,useMemo as y}from"react";import{keyframes as x}from"@emotion/react";var n=x`
  100% { transform: rotate(1turn) }
`,u=4.375;function i(r){let e=v(null),[o,t]=b("0px"),[l,h]=b("0px");C(()=>{function d(){if(e.current==null)return;let c=Math.min(e.current.offsetHeight,e.current.offsetWidth),S=c/u;h(`${S}px`),t(`${c}px`)}d();let f=new ResizeObserver(d);return e.current!=null&&f.observe(e.current),()=>{e.current!=null&&f.unobserve(e.current)}},[]);let a=r.noir===!0?"rgba(0, 0, 0, 0.5)":"rgba(255, 255, 255, 0.33)",m=r.size??"100%";return y(()=>({color:a,ref:e,minimum:o,borderWidth:l,size:m}),[a,o,l,m])}import{jsx as p}from"@emotion/react/jsx-runtime";function s(r){let e=i(r),o={height:e.size,width:e.size,aspectRatio:"1/1",position:"relative",display:"flex",boxSizing:"border-box",...r.canisterStyle},t=z({width:e.minimum,height:e.minimum,borderRadius:"50%",borderWidth:e.borderWidth,borderStyle:"solid",borderTopColor:e.color,borderRightColor:e.color,borderBottomColor:e.color,borderLeftColor:"transparent",animation:`${n} 1.5s infinite linear`,boxSizing:"border-box","&::before, &::after":{content:'""',position:"absolute",inset:`-${e.borderWidth}`,borderRadius:"50%",border:"inherit",animation:"inherit"},"&::before":{animationDuration:"3s"},"&::after":{animationDuration:"6s"},...r.reelStyle});return p("div",{className:r.canisterClassName,ref:e.ref,style:o,children:p("span",{className:r.reelClassName,css:t})})}import{css as E}from"@emotion/react";import{jsx as R}from"@emotion/react/jsx-runtime";function g(r){let e=i(r),o={height:e.size,width:e.size,overflow:"hidden",...r.canisterStyle},t=E({aspectRatio:"1/1",display:"flex",borderRadius:"50%",borderWidth:e.borderWidth,borderStyle:"solid",borderTopColor:e.color,borderRightColor:e.color,borderBottomColor:e.color,borderLeftColor:"transparent",animation:`${n} 1.75s infinite linear`,boxSizing:"border-box",overflow:"hidden",...r.reelStyle});return R("div",{className:r.canisterClassName,ref:e.ref,style:o,children:R("span",{className:r.reelClassName,css:t})})}var Y=s;export{s as Reeling,g as SingleReeling,Y as default};
//# sourceMappingURL=index.js.map