UNPKG

@nadfri/react-scroll-progress-bar

Version:

### Add a progress bar on the top of your page to indicate the position of the scroll page

3 lines (2 loc) 1.06 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;exports.ProgressBar=function(e){var o=e.color1,n=e.color2,i=e.position,s=e.height,l=t.useRef(null),c=function(){var e=document.documentElement;l.current.style.width=Math.floor(e.scrollTop/(e.scrollHeight-e.clientHeight)*100)+"%"};t.useEffect((function(){return window.addEventListener("scroll",c),function(){return window.removeEventListener("scroll",c)}}),[]),o="string"==typeof o&&""!==o?o:"#808080",n="string"==typeof n&&""!==n?n:"#ffd700",s="string"==typeof s&&""!==s?s:"4px";var a={container:{position:i=["fixed","absolute","relative","sticky","static"].includes(i)?i:"fixed",height:s,backgroundColor:o,zIndex:"999",width:"100%",top:"0",left:"0"},progressBar:{backgroundColor:n,transition:"all 0.5s ease-out",width:"0%",height:"100%"}};return r.createElement("div",{style:a.container},r.createElement("div",{style:a.progressBar,ref:l}))}; //# sourceMappingURL=react-scroll-progress-bar.cjs.production.min.js.map