How to change entire progressbar color based on pageload value?



  • 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.



  • @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':
    0_1523962506453_d546c5cb-9656-4821-8fc0-a94e3fec4702-image.png

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



  • @lonm Ah! Ok, thanks.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.