Impement Gradient Progress bar color like Instagram

[Hatef-Rostamkhani]

HI please Implement Gradient Progress bar color like Instagram

login in web https://www.instagram.com/ and navigate on pages , show progress bar on top page thank you so much.

[glhrmv]

Hi, I used the dev tools inspector on Instagram's website and managed to replicate the effect. Here is my result, identical to Instagram's. Direct link to gif

I copied Instagram's CSS for their loading bar directly onto nprogress' .bar element.

#nprogress .bar {
  height: 4px;
  background: #27c4f5 linear-gradient(to right,#27c4f5,#a307ba,#fd8d32,#70c050,#27c4f5);
  background-size: 500%;
  animation: 2s linear infinite barprogress, .3s fadein;
  width: 100%;
}

The animation references a barprogress animation that I had to go digging around for in Instagram's page, but it's very simple:

@keyframes barprogress{
  0% {
    background-position:0% 0
  }
  to{
    background-position:125% 0
  }
}

I also hid the nprogress .spinner-icon since it's not used on Instagram.

#nprogress .spinner-icon {
  border-top-color: transparent;
  border-left-color: transparent;
}

[Hatef-Rostamkhani]

That is good thank you

[developerruhul]

solid stuff thank u so much..