nextjs-toploader
Version:
A Next.js Top Loading Bar component made using nprogress, works with Next.js 15 and Next.js 14 and React.
10 lines • 5.12 kB
JavaScript
"use client";var D=Object.create;var y=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var i=(o,e)=>y(o,"name",{value:e,configurable:!0});var Z=(o,e)=>{for(var p in e)y(o,p,{get:e[p],enumerable:!0})},C=(o,e,p,h)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of Q(e))!Y.call(o,l)&&l!==p&&y(o,l,{get:()=>e[l],enumerable:!(h=G(e,l))||h.enumerable});return o};var T=(o,e,p)=>(p=o!=null?D(V(o)):{},C(e||!o||!o.__esModule?y(p,"default",{value:o,enumerable:!0}):p,o)),_=o=>C(y({},"__esModule",{value:!0}),o);var re={};Z(re,{default:()=>ee,useTopLoader:()=>O});module.exports=_(re);var t=T(require("prop-types")),L=T(require("react")),a=T(require("nprogress"));var s=T(require("nprogress"));var O=i(()=>({start:()=>s.start(),done:e=>s.done(e),remove:()=>s.remove(),setProgress:e=>s.set(e),inc:e=>s.inc(e),trickle:()=>s.trickle(),isStarted:()=>s.isStarted(),isRendered:()=>s.isRendered(),getPositioningCSS:()=>s.getPositioningCSS()}),"useTopLoader");var z=i(({color:o,height:e,showSpinner:p,crawl:h,crawlSpeed:l,initialPosition:v,easing:S,speed:k,shadow:N,template:E,zIndex:A=1600,showAtBottom:H=!1,showForHashAnchor:K=!0})=>{let W="#29d",u=o!=null?o:W,j=e!=null?e:3,B=!N&&N!==void 0?"":N?`box-shadow:${N}`:`box-shadow:0 0 10px ${u},0 0 5px ${u}`,F=L.createElement("style",null,`#nprogress{pointer-events:none}#nprogress .bar{background:${u};position:fixed;z-index:${A};${H?"bottom: 0;":"top: 0;"}left:0;width:100%;height:${j}px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;${B};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:${A};${H?"bottom: 15px;":"top: 15px;"}right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:${u};border-left-color:${u};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)}}`),f=i(m=>new URL(m,window.location.href).href,"toAbsoluteURL"),q=i((m,b)=>{let d=new URL(f(m)),P=new URL(f(b));return d.href.split("#")[0]===P.href.split("#")[0]},"isHashAnchor"),I=i((m,b)=>{let d=new URL(f(m)),P=new URL(f(b));return d.hostname.replace(/^www\./,"")===P.hostname.replace(/^www\./,"")},"isSameHostName");return L.useEffect(()=>{a.configure({showSpinner:p!=null?p:!0,trickle:h!=null?h:!0,trickleSpeed:l!=null?l:200,minimum:v!=null?v:.08,easing:S!=null?S:"ease",speed:k!=null?k:200,template:E!=null?E:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'});function m(r,g){let n=new URL(r),c=new URL(g);if(n.hostname===c.hostname&&n.pathname===c.pathname&&n.search===c.search){let w=n.hash,x=c.hash;return w!==x&&n.href.replace(w,"")===c.href.replace(x,"")}return!1}i(m,"isAnchorOfCurrentUrl");var b=document.querySelectorAll("html");let d=i(()=>b.forEach(r=>r.classList.remove("nprogress-busy")),"removeNProgressClass");function P(r){for(;r&&r.tagName.toLowerCase()!=="a";)r=r.parentElement;return r}i(P,"findClosestAnchor");function R(r){try{let g=r.target,n=P(g),c=n==null?void 0:n.href;if(c){let w=window.location.href,x=n.target!=="",J=["tel:","mailto:","sms:","blob:","download:"].some(X=>c.startsWith(X));if(!I(window.location.href,n.href))return;let M=m(w,c)||q(window.location.href,n.href);if(!K&&M)return;c===w||x||J||M||r.ctrlKey||r.metaKey||r.shiftKey||r.altKey||!f(n.href).startsWith("http")?(a.start(),a.done(),d()):a.start()}}catch(g){a.start(),a.done()}}i(R,"handleClick"),(r=>{let g=r.pushState;r.pushState=(...n)=>(a.done(),d(),g.apply(r,n))})(window.history),(r=>{let g=r.replaceState;r.replaceState=(...n)=>(a.done(),d(),g.apply(r,n))})(window.history);function U(){a.done(),d()}i(U,"handlePageHide");function $(){a.done()}return i($,"handleBackAndForth"),window.addEventListener("popstate",$),document.addEventListener("click",R),window.addEventListener("pagehide",U),()=>{document.removeEventListener("click",R),window.removeEventListener("pagehide",U),window.removeEventListener("popstate",$)}},[]),F},"NextTopLoader"),ee=z;z.propTypes={color:t.string,height:t.number,showSpinner:t.bool,crawl:t.bool,crawlSpeed:t.number,initialPosition:t.number,easing:t.string,speed:t.number,template:t.string,shadow:t.oneOfType([t.string,t.bool]),zIndex:t.number,showAtBottom:t.bool};0&&(module.exports={useTopLoader});
/**
*
* NextTopLoader
* @license MIT
* @param {NextTopLoaderProps} props The properties to configure NextTopLoader
* @returns {React.JSX.Element}
*
*/
//# sourceMappingURL=index.js.map