remix-toploader/dist/index.mjs

Remix and React Router Top Loading bar using NProgress.

var P=Object.defineProperty;var r=(e,i)=>P(e,"name",{value:i,configurable:!0});import{useFetchers as w,useNavigation as z}from"@remix-run/react";import*as t from"react";import*as o from"nprogress";var T=r(({color:e="#29d",height:i=3,showSpinner:a,crawl:p,crawlSpeed:d,initialPosition:m,easing:g,speed:f,shadow:s,template:u,zIndex:c=1600,showAtBottom:x=!1,useFetchers:R,useNavigation:L})=>{let l=L(),h=R(),v=t.useMemo(r(function(){return[l.state,...h.map(b=>b.state)].every(b=>b==="idle")?"idle":"loading"},"getGlobalState"),[l.state,h]),N=!s&&s!==void 0?"":s?`box-shadow:${s}`:`box-shadow:0 0 10px ${e},0 0 5px ${e}`,F=t.createElement("style",null,`#nprogress{pointer-events:none}#nprogress .bar{background:${e};position:fixed;z-index:${c};${x?"bottom: 0;":"top: 0;"}left:0;width:100%;height:${i}px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;${N};opacity:1;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translate(0px,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:${c};${x?"bottom: 15px;":"top: 15px;"}right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:${e};border-left-color:${e};border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}`);return t.useEffect(()=>{o.configure({showSpinner:a!=null?a:!0,trickle:p!=null?p:!0,trickleSpeed:d!=null?d:200,minimum:m!=null?m:.08,easing:g!=null?g:"ease",speed:f!=null?f:200,template:u!=null?u:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'}),v==="loading"&&o.start(),v==="idle"&&o.done()},[l.state]),F},"Loader"),n=T;import*as y from"react";var k=r(()=>y.createElement(n,{useFetchers:w,useNavigation:z}),"RemixTopLoader");import{useFetchers as S,useNavigation as E}from"react-router";import*as $ from"react";var A=r(()=>$.createElement(n,{useFetchers:S,useNavigation:E}),"RouterTopLoader");var Y=k;export{k as RemixTopLoader,A as RouterTopLoader,Y as default};
//# sourceMappingURL=index.mjs.map