Gradient only on one section

Question

On my previous post I asked how I'd get the gradient set up. Now the problem is that the gradient "spreads" out. Here's What I'm using

function generateCSSGradient(colours) {
var l = colours.length, i;
for( i=0; i<l; i++) colours[i] = colours[i].join(" ");
return "linear-gradient( to right, "+colours.join(", ")+")";
}

var cols = [
["red","0%"],
["red","40%"],
["yellow","40%"], 
["yellow","60%"],
["green","60%"],
["green","80%"]
];
yourElement.style.background = generateCSSGradient(cols); 

With this . What I want to do is say you fill in one input. And the bar goes to 33%, then that could be a red color. Then the next would be a blue and so fourth. Not like this . Any ideas? I'd also avoid using div

Answer 1

I think you want it like this ... See the source code

HTML

I'v edited the HTML code and added another div called colors inside the div top ...

<div class="top">
    <div class="colors"></div>
</div>

CSS

Also I edited the CSS of .top and added to it overflow:hidden; and create .colors style

.top{
    /*background: #009dff;*/
    background:linear-gradient(to right,#009dff 0,#00c8ff 100%);
    position:fixed;
    z-index:1031;
    top:0;
    left:0;
    height:4px;
    transition:all 1s;
    width:0;
    overflow: hidden;
}

.colors{
    width: 100%;
    height: 4px;
}

JavsScript

Then edited the JavaScript and made the CSSGradient to colors not top , and let the JavaScript set the width of colors to fit the window width , and changed the colors percentage..

document.querySelector(".colors").style.background = generateCSSGradient(cols);

var window_width = window.innerWidth + "px";
document.querySelector(".colors").style.width = window_width;

var cols = [
    ["red","0%"],
    ["red","33.3%"],
    ["yellow","33.3%"],
    ["yellow","66.6%"],
    ["green","66.6%"],
    ["green","100%"]
];

Hope this will help you ...

---

Update

if you want to change the color of the bar like this , See the source code ...

just edit the JavaScript to be like this

function cback(e) {
    var t = [];
    for (var n = inputs.length; n--;) {
        if (!inputs[n].value.length) t.push(inputs[n]);
    }
    var r = t.length;
    var i = inputs.length;
    var s = document.querySelectorAll(".top");
    for (var o = s.length; o--;) {
        s[o].style.width = 100 - r / i * 100 + "%";
        s[o].style.background = cols[i-r-1];
    }
}
var forms = document.querySelectorAll(".form"),
    inputs = [];
for (var i = forms.length; i--;) {
    var els = forms[i].querySelectorAll("input, textarea, select");
    for (var j = els.length; j--;) {
        if (els[j].type != "button" && els[j].type != "submit") {
            inputs.push(els[j]);
            els[j].addEventListener("input", cback, false);
        }
    }
}

var cols = ["red","yellow","green"];