How to change entire progressbar color based on pageload value?

[dude99]

I have mod the addressbar's progressbar to locate at the bottom of window, with different color progression while page loading, but I can't make it progressively changing color based on pageload %. Anyone know how to do it properly?

This is my codes:

// move progress bar to bottom
.addressfield .pageload.progressing .pageload-indicator {
	position: fixed;
	z-index: 100 !important;	
	top: calc(100vh - 3.5px);
	left: 0;
	visibility: visible;
 	display: block;
	width: 100vw;
	height: 3px;
	border-radius: 0;
	opacity: 1 !important;
	background: transparent;
}

// add texture to progressbar background
.addressfield .pageload:not(.unstarted).progressing .pageload-indicator:after { 
    content:"";
    position:absolute;
    top:0; left:0; bottom:0; right:0;
    overflow: hidden;
    border-radius:0;
   -webkit-background-size: 100vw;
   background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.14) 1%, transparent 1%, transparent 2%, rgba(255, 255, 255, 0.25) 2%, rgba(255, 255, 255, 0.25) 3%, transparent 3%, transparent 4%);
}

// changing progressbar color 
.addressfield .pageload:not(.unstarted).progressing .pageload-indicator::-webkit-progress-value { 
   border-radius: 0 2px 2px 0; 
   -webkit-background-size: 100vw;
   background-image:  linear-gradient(90deg, crimson, orangered, orange, gold, greenyellow, limegreen, dodgerblue, darkblue);
}

.

In common.css I found this:

.addressfield .pageload:not(.unstarted).progressing .pageload-indicator[value='0']::-webkit-progress-value

I tried using different "value=x" to change the progress bar color but failed. Anyone know the proper syntax to change color based of the "value"? Example <0=red, <20=orange, <40=gold & etc.

Thanks for support.

[LonM]

@dude99

.pageload-indicator[value='20']::-webkit-progress-value {
    background-color: green !important;
}
.pageload-indicator {
    background-color: transparent !important;
}

This works for me if I set the progress bar value to '20':

It might be the !important that you're missing.

[dude99]

@lonm Ah! Ok, thanks.