Progress bar (Gradient instead of one single color)?

Hello all.

I’m looking for an easy way to change the one color progress bar at the top of the page for a nice gradient !!! Is there a way to achieve this?

Thanks a lot

You can try adding a global style tag in “Settings” > “SEO/Metatags” > “Script in the body” and override the default style of the progress bar.

The target selectors should be #nprogress .bar for the color of the bar (you want to apply your gradient background here), and #nprogress .peg for the element that adds a box-shadow.

Thanks for the reply…

I cant get it to work though. Tried to change to plain white to see if it’s working and it’s not. Is it what you meant to do??

I’m not on my pc now but:

try something like:

#nprogress .bar {
  background: linear-gradient(
  90deg,
  hsl(240deg 100% 20%) 0%,
  hsl(329deg 100% 36%) 33%,
  hsl(17deg 100% 59%) 67%,
  hsl(55deg 100% 50%) 100%
) !important;
}
#nprogress .peg{
display: none !important;
}

EDIT: you need to change the background property instead of the background-image. Updated the code and the reference page.

Thank you very much :wink:

Got it to work and it looks awesome

1 Like