Closed imranbarbhuiya closed 1 year ago
Need to update versioin
in package.json
done
it looks like that transformCSS prop is not available in the 0.0.15 release I see now that currently on the repo the version is 0.0.16, however uninstalling and re-installing@latest still downloads 0.0.15 while trying to force it on .16:
$ npm i nextjs-progressbar@0.0.16 npm ERR! code ETARGET npm ERR! notarget No matching version found for nextjs-progressbar@0.0.16.
0.0.16
isn't released yet.
@DragoshDX it is released now to npm.
thank you for your work
This pr
React.memo
for better perfpartially fixes #74, #79
Minify CSS
Using
@emotion/react
Without using any package
Create a css file with the following content.
nprogress.css
```css #nprogress { pointer-events: none; } #nprogress .bar { background: #29D; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 3px; } #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #29D, 0 0 5px #29D; 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: 1031; top: 15px; right: 15px; } #nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: #29D; border-left-color: #29D; border-radius: 50%; -webkit-animation: nprogresss-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite; } .nprogress-custom-parent { overflow: hidden; position: relative; } .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar { 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); } } ```And in
_app.tsx