reeling/dist/index.cjs

A React loading indicator inspired by curated cinema

"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }var _react = require('@emotion/react');var _react3 = require('react');var n=_react.keyframes`
  100% { transform: rotate(1turn) }
`,u=4.375;function i(r){let e=_react3.useRef.call(void 0, null),[o,t]=_react3.useState.call(void 0, "0px"),[l,h]=_react3.useState.call(void 0, "0px");_react3.useEffect.call(void 0, ()=>{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=_nullishCoalesce(r.size, () => ("100%"));return _react3.useMemo.call(void 0, ()=>({color:a,ref:e,minimum:o,borderWidth:l,size:m}),[a,o,l,m])}var _jsxruntime = require('@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=_react.css.call(void 0, {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 _jsxruntime.jsx.call(void 0, "div",{className:r.canisterClassName,ref:e.ref,style:o,children:_jsxruntime.jsx.call(void 0, "span",{className:r.reelClassName,css:t})})}function g(r){let e=i(r),o={height:e.size,width:e.size,overflow:"hidden",...r.canisterStyle},t=_react.css.call(void 0, {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 _jsxruntime.jsx.call(void 0, "div",{className:r.canisterClassName,ref:e.ref,style:o,children:_jsxruntime.jsx.call(void 0, "span",{className:r.reelClassName,css:t})})}var Y=s;exports.Reeling = s; exports.SingleReeling = g; exports.default = Y;
//# sourceMappingURL=index.cjs.map