next-nprogress-emotion
Version:
Theme aware NProgress component to use in Next.js apps using Emotion or ThemeUI.
3 lines (2 loc) • 1.98 kB
JavaScript
;function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),o=e(r),t=e(require("nprogress")),n=e(require("next/router")),s=require("@emotion/react"),i=function(e){var i=e.color,p=e.spinner,a=e.showAfterMs,u=e.options,l=r.useRef(),f=function(){window.clearTimeout(l.current),l.current=window.setTimeout(t.start,a)},d=function(){window.clearTimeout(l.current),t.done()};return r.useEffect((function(){return u&&t.configure(u),n.events.on("routeChangeStart",f),n.events.on("routeChangeComplete",d),n.events.on("routeChangeError",d),function(){clearTimeout(l.current),n.events.off("routeChangeStart",f),n.events.off("routeChangeComplete",d),n.events.off("routeChangeError",d)}})),o.createElement(s.Global,{styles:function(e){var r,o=(null==e||null==(r=e.colors)?void 0:r[i])||i;return{"#nprogress":{pointerEvents:"none"},"#nprogress .bar":{background:o,position:"fixed",zIndex:1031,top:0,left:0,width:"100%",height:"2px"},"#nprogress .peg":{display:"block",position:"absolute",right:"0px",width:"100px",height:"100%",boxShadow:"0 0 10px "+o+", 0 0 5px "+o,opacity:1,transform:"rotate(3deg) translate(0px, -4px)"},"#nprogress .spinner":{display:p?"block":"none",position:"fixed",zIndex:1031,top:"15px",right:"15px"},"#nprogress .spinner-icon":{width:"18px",height:"18px",boxSizing:"border-box",border:"solid 2px transparent",borderTopColor:o,borderLeftColor:o,borderRadius:"50%",animation:"nprogress-spinner 400ms linear infinite"},".nprogress-custom-parent":{overflow:"hidden",position:"relative"},".nprogress-custom-parent #nprogress .spinner":{position:"absolute"},".nprogress-custom-parent #nprogress .bar":{position:"absolute"},"@keyframes nprogress-spinner":{"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}}}}})};i.defaultProps={color:"primary",showAfterMs:300,spinner:!0},exports.default=i;
//# sourceMappingURL=next-nprogress-emotion.cjs.production.min.js.map