jQuery set background: -webkit-linear-gradient

Question

Work In Progress...

 var value = 0, pos = 0, progressHidden = false, progressEl = $('.ProgressPercent'), timer = setInterval(progress, 100); var ProgressColourTween = [ "#ff4400", "#ff4900", "#ff4a00", "#ff4c00", "#ff4d00", "#ff4f00", "#ff5000", "#ff5100", "#ff5200", "#ff5400", "#ff5600", "#ff5700", "#ff5900", "#ff5a00", "#ff5c00", "#ff5c00", "#ff5e00", "#ff5f00", "#ff6100", "#ff6300", "#ff6400", "#ff6600", "#ff6700", "#ff6800", "#ff6900", "#ff6b00", "#ff6c00", "#ff6e00", "#ff6f00", "#ff7100", "#ff7200", "#ff7300", "#ff7500", "#ff7600", "#ff7800", "#ff7900", "#ff7a00", "#ff7c00", "#ff7d00", "#ff7f00", "#ff8700", "#ff8800", "#ff8a00", "#ff8b00", "#ff8c00", "#ff8e00", "#ff8f00", "#ff9100", "#ff9200", "#ff9400", "#ff9400", "#fc9500", "#fa9600", "#f79700", "#f59800", "#f29900", "#f09a00", "#ed9c00", "#eb9c00", "#e89e00", "#e69e00", "#e3a000", "#e0a100", "#dea200", "#dba300", "#d9a400", "#d6a500", "#d4a600", "#d1a700", "#cfa800", "#cca900", "#c9ab00", "#c7ab00", "#c4ad00", "#c2ae00", "#bfaf00", "#bdb000", "#bab100", "#b8b200", "#b5b300", "#b3b400", "#b0b500", "#adb600", "#abb700", "#a8b900", "#a6b900", "#a3bb00", "#a1bb00", "#9ebd00", "#9cbe00", "#99bf00", "#96c000", "#94c100", "#91c200", "#8fc300", "#8cc400", "#8ac500", "#87c600", "#85c700", "#82c800" ]; function progress() { // run counter value++; if (value <= 100) { $('.ProgressPercent .Percent').text(value); $('.Overlay .Percent').text(value); $('.ProgressPercent .Percent').css({ "color": ProgressColourTween[value] }); $('.ProgressPercent .Sign').css({ "color": ProgressColourTween[value] }); $('.ProgressWrap .Overlay .Percent').css({ background: "-webkit-linear-gradient(#CCCCCC, #CCCCCC 20%, transparent 20%, transparent 100%)" }); } } 

 .ProgressWrap { font-family: "Comic Sans MS", cursive, sans-serif; font-size: 100px; } .ProgressWrap .Overlay { position: absolute; } .ProgressWrap .Overlay .Percent, .ProgressWrap .Overlay .Sign { float: left; background: -webkit-linear-gradient(#CCC, #CCC 50%, transparent 50%, transparent 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ProgressWrap .ProgressPercent .Percent, .ProgressWrap .ProgressPercent .Sign { float: left; } .ProgressWrap > span { float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ProgressWrap"> <div class="Overlay"> <div class="Percent">0</div> <div class="Sign">%</div> </div> <div class="ProgressPercent"> <div class="Percent">0</div> <div class="Sign">%</div> </div> </div> 

Problems & Questions

1). Overlaid Text Does Not Appear To Be Same Size

You can still see the blending colours where the overlaid text is. This is noticeable on the percentage sign above.

2). Manipulating background: -webkit-linear-gradient(#CCC, #CCC 50%, transparent 50%, transparent 100%); Using jQuery

As you can see from the above, I am trying to set background: -webkit-linear-gradient(#CCC, #CCC 50%, transparent 50%, transparent 100%); via jQuery so I can then make it so that I can manipulate the percentages which will be 100 - value

Without jQuery Background Attempt:

 var value = 0, pos = 0, progressHidden = false, progressEl = $('.ProgressPercent'), timer = setInterval(progress, 100); var ProgressColourTween = [ "#ff4400", "#ff4900", "#ff4a00", "#ff4c00", "#ff4d00", "#ff4f00", "#ff5000", "#ff5100", "#ff5200", "#ff5400", "#ff5600", "#ff5700", "#ff5900", "#ff5a00", "#ff5c00", "#ff5c00", "#ff5e00", "#ff5f00", "#ff6100", "#ff6300", "#ff6400", "#ff6600", "#ff6700", "#ff6800", "#ff6900", "#ff6b00", "#ff6c00", "#ff6e00", "#ff6f00", "#ff7100", "#ff7200", "#ff7300", "#ff7500", "#ff7600", "#ff7800", "#ff7900", "#ff7a00", "#ff7c00", "#ff7d00", "#ff7f00", "#ff8700", "#ff8800", "#ff8a00", "#ff8b00", "#ff8c00", "#ff8e00", "#ff8f00", "#ff9100", "#ff9200", "#ff9400", "#ff9400", "#fc9500", "#fa9600", "#f79700", "#f59800", "#f29900", "#f09a00", "#ed9c00", "#eb9c00", "#e89e00", "#e69e00", "#e3a000", "#e0a100", "#dea200", "#dba300", "#d9a400", "#d6a500", "#d4a600", "#d1a700", "#cfa800", "#cca900", "#c9ab00", "#c7ab00", "#c4ad00", "#c2ae00", "#bfaf00", "#bdb000", "#bab100", "#b8b200", "#b5b300", "#b3b400", "#b0b500", "#adb600", "#abb700", "#a8b900", "#a6b900", "#a3bb00", "#a1bb00", "#9ebd00", "#9cbe00", "#99bf00", "#96c000", "#94c100", "#91c200", "#8fc300", "#8cc400", "#8ac500", "#87c600", "#85c700", "#82c800" ]; function progress() { // run counter value++; if (value <= 100) { $('.ProgressPercent .Percent').text(value); $('.Overlay .Percent').text(value); $('.ProgressPercent .Percent').css({ "color": ProgressColourTween[value] }); $('.ProgressPercent .Sign').css({ "color": ProgressColourTween[value] }); } } 

 .ProgressWrap { font-family: "Comic Sans MS", cursive, sans-serif; font-size: 100px; } .ProgressWrap .Overlay { position: absolute; } .ProgressWrap .Overlay .Percent, .ProgressWrap .Overlay .Sign { float: left; background: -webkit-linear-gradient(#CCC, #CCC 50%, transparent 50%, transparent 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ProgressWrap .ProgressPercent .Percent, .ProgressWrap .ProgressPercent .Sign { float: left; } .ProgressWrap > span { float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ProgressWrap"> <div class="Overlay"> <div class="Percent">0</div> <div class="Sign">%</div> </div> <div class="ProgressPercent"> <div class="Percent">0</div> <div class="Sign">%</div> </div> </div> 

Answer 1

You can use css mix-blend-mode to adjust contrasts between content and background.

The mix-blend-mode CSS property describes how an element's content should blend with the content of the element's direct parent and the element's background.

For example, using overlay value set at .ProgressWrap .Overlay .Percent, .ProgressWrap .Overlay .Sign selectors

 var value = 0, pos = 0, progressHidden = false, progressEl = $('.ProgressPercent'), timer = setInterval(progress, 100); var ProgressColourTween = [ "#ff4400", "#ff4900", "#ff4a00", "#ff4c00", "#ff4d00", "#ff4f00", "#ff5000", "#ff5100", "#ff5200", "#ff5400", "#ff5600", "#ff5700", "#ff5900", "#ff5a00", "#ff5c00", "#ff5c00", "#ff5e00", "#ff5f00", "#ff6100", "#ff6300", "#ff6400", "#ff6600", "#ff6700", "#ff6800", "#ff6900", "#ff6b00", "#ff6c00", "#ff6e00", "#ff6f00", "#ff7100", "#ff7200", "#ff7300", "#ff7500", "#ff7600", "#ff7800", "#ff7900", "#ff7a00", "#ff7c00", "#ff7d00", "#ff7f00", "#ff8700", "#ff8800", "#ff8a00", "#ff8b00", "#ff8c00", "#ff8e00", "#ff8f00", "#ff9100", "#ff9200", "#ff9400", "#ff9400", "#fc9500", "#fa9600", "#f79700", "#f59800", "#f29900", "#f09a00", "#ed9c00", "#eb9c00", "#e89e00", "#e69e00", "#e3a000", "#e0a100", "#dea200", "#dba300", "#d9a400", "#d6a500", "#d4a600", "#d1a700", "#cfa800", "#cca900", "#c9ab00", "#c7ab00", "#c4ad00", "#c2ae00", "#bfaf00", "#bdb000", "#bab100", "#b8b200", "#b5b300", "#b3b400", "#b0b500", "#adb600", "#abb700", "#a8b900", "#a6b900", "#a3bb00", "#a1bb00", "#9ebd00", "#9cbe00", "#99bf00", "#96c000", "#94c100", "#91c200", "#8fc300", "#8cc400", "#8ac500", "#87c600", "#85c700", "#82c800" ]; function progress() { // run counter value++; if (value <= 100) { $('.ProgressPercent .Percent').text(value); $('.Overlay .Percent').text(value); $('.ProgressPercent .Percent').css({ "color": ProgressColourTween[value] }); $('.ProgressPercent .Sign').css({ "color": ProgressColourTween[value] }); $('.ProgressWrap .Overlay .Percent').css({ background: "-webkit-linear-gradient(#CCCCCC, #CCCCCC 20%, transparent 20%, transparent 100%)" }); } } 

 .ProgressWrap { font-family: "Comic Sans MS", cursive, sans-serif; font-size: 100px; } .ProgressWrap .Overlay { position: absolute; } .ProgressWrap .Overlay .Percent, .ProgressWrap .Overlay .Sign { float: left; background: -webkit-linear-gradient(#CCC, #CCC 50%, transparent 50%, transparent 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; mix-blend-mode: overlay; border:none; outline:none; padding:0; margin:0; } .ProgressWrap .ProgressPercent .Percent, .ProgressWrap .ProgressPercent .Sign { float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ProgressWrap"> <div class="Overlay"> <div class="Percent">0</div> <div class="Sign">%</div> </div> <div class="ProgressPercent"> <div class="Percent">0</div> <div class="Sign">%</div> </div> </div> 

Setting color as value

 var value = 0, pos = 0, progressHidden = false, progressEl = $('.ProgressPercent'), timer = setInterval(progress, 100); var ProgressColourTween = [ "#ff4400", "#ff4900", "#ff4a00", "#ff4c00", "#ff4d00", "#ff4f00", "#ff5000", "#ff5100", "#ff5200", "#ff5400", "#ff5600", "#ff5700", "#ff5900", "#ff5a00", "#ff5c00", "#ff5c00", "#ff5e00", "#ff5f00", "#ff6100", "#ff6300", "#ff6400", "#ff6600", "#ff6700", "#ff6800", "#ff6900", "#ff6b00", "#ff6c00", "#ff6e00", "#ff6f00", "#ff7100", "#ff7200", "#ff7300", "#ff7500", "#ff7600", "#ff7800", "#ff7900", "#ff7a00", "#ff7c00", "#ff7d00", "#ff7f00", "#ff8700", "#ff8800", "#ff8a00", "#ff8b00", "#ff8c00", "#ff8e00", "#ff8f00", "#ff9100", "#ff9200", "#ff9400", "#ff9400", "#fc9500", "#fa9600", "#f79700", "#f59800", "#f29900", "#f09a00", "#ed9c00", "#eb9c00", "#e89e00", "#e69e00", "#e3a000", "#e0a100", "#dea200", "#dba300", "#d9a400", "#d6a500", "#d4a600", "#d1a700", "#cfa800", "#cca900", "#c9ab00", "#c7ab00", "#c4ad00", "#c2ae00", "#bfaf00", "#bdb000", "#bab100", "#b8b200", "#b5b300", "#b3b400", "#b0b500", "#adb600", "#abb700", "#a8b900", "#a6b900", "#a3bb00", "#a1bb00", "#9ebd00", "#9cbe00", "#99bf00", "#96c000", "#94c100", "#91c200", "#8fc300", "#8cc400", "#8ac500", "#87c600", "#85c700", "#82c800" ]; function progress() { // run counter value++; if (value <= 100) { $('.ProgressPercent .Percent').text(value); $('.Overlay .Percent').text(value); $('.ProgressPercent .Percent').css({ "color": ProgressColourTween[value] }); $('.ProgressPercent .Sign').css({ "color": ProgressColourTween[value] }); $('.ProgressWrap .Overlay .Percent').css({ background: "-webkit-linear-gradient(#CCCCCC, #CCCCCC 20%, transparent 20%, transparent 100%)" }); } } 

 .ProgressWrap { font-family: "Comic Sans MS", cursive, sans-serif; font-size: 100px; } .ProgressWrap .Overlay { position: absolute; } .ProgressWrap .Overlay .Percent, .ProgressWrap .Overlay .Sign { float: left; background: -webkit-linear-gradient(#CCC, #CCC 50%, transparent 50%, transparent 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; mix-blend-mode: color; border:none; outline:none; padding:0; margin:0; } .ProgressWrap .ProgressPercent .Percent, .ProgressWrap .ProgressPercent .Sign { float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ProgressWrap"> <div class="Overlay"> <div class="Percent">0</div> <div class="Sign">%</div> </div> <div class="ProgressPercent"> <div class="Percent">0</div> <div class="Sign">%</div> </div> </div>