how to change nprogress bar color dynamically
bharathchandragoud opened this issue ยท 9 comments
bharathchandragoud commented
how to change nprogress bar color dynamically
bharathchandragoud commented
i got it. thankyou
carlo-fontanos commented
Huh? what's the solution?
bharathchandragoud commented
Before starting NProgress.start(); function you need to change the color code in
#nprogress .bar {
background: #29d !important;
}
Anduin2017 commented
#nprogress .bar {
background: #29d !important;
}
@bharathchandragoud Your style really helps. Thanks!
phattranky commented
Custom whole color by
#nprogress .bar {
background: #FFBB00 !important;
}
#nprogress .peg {
box-shadow: 0 0 10px #FFBB00, 0 0 5px #FFBB00;
}
#nprogress .spinner-icon {
border-top-color: #FFBB00;
border-left-color: #FFBB00;
}
nexter21 commented
Thanks for the answer @phattranky, but seems like the code for spinner has changed a little. It's now:
#nprogress .spinner .spinner-icon {
border-top-color: #ffbb00;
border-left-color: #ffbb00;
}
Nyavowoyi commented
This is my style:
#nprogress .bar {
background: #ffbb00 !important;
padding: 0 10px !important;
height: 6px !important;
}
#nprogress .spinner .spinner-icon {
border-top-color: #ffbb00 !important;
border-left-color: #ffbb00 !important;
}
Simply call `NProgress.start()` to see the effect and modify to your taste.
You can also inspect the element from the browser's console and check the style applied to the #nprogress element.
This way, you can even get to know more properties that you can customize. I hope it helps.
merthanmerter commented
[data-theme='light'] #nprogress .bar {
background: rgb(24 24 27);
}
[data-theme='dark'] #nprogress .bar {
background: rgb(228 228 231);
}
#nprogress .bar {
position: fixed;
z-index: 1110 !important;
top: 0;
left: 0;
width: 100%;
height: 5px;
}
joisun commented
Try this:
NProgress.setColor("green");
NProgress.start();
// after dosomething...
NProgress.done();
src/utils/nprogress.ts
import NProgress from "nprogress"; // progress bar
import "nprogress/nprogress.css"; // progress bar style
NProgress.configure({ showSpinner: false });
NProgress.setColor = (color) => {
const style = document.createElement('style')
style.textContent = `
#nprogress .bar {
background: ${color} !important;
}
`
document.body.appendChild(style)
}
export default NProgress;
don't forget to declare it:
src/types/nprogress.d.ts
import type { nProgress } from "nprogress"
declare module 'nprogress' {
interface NProgress extends nProgress {
setColor: (color: string) => void
[key: string]: any
}
}