how to change nprogress bar color dynamically

[bharathchandragoud]

No description provided.

[bharathchandragoud]

i got it. thankyou

[carlo-fontanos]

Huh? what's the solution?

[bharathchandragoud]

Before starting NProgress.start(); function you need to change the color code in
#nprogress .bar {
background: #29d !important;
}

[Anduin2017]

#nprogress .bar {
background: #29d !important;
}

@bharathchandragoud Your style really helps. Thanks!

[phattranky]

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]

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]

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]

[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]

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
  }
}