根据div的宽度大小应用不同的颜色？

Question

I am trying to apply a different color to a div depending its width size.

My html is this

<div class="container">
        <div class="progress"></div>
      </div>

And my CSS is this:

div._progress{
    background-color: black;
    width: 100%;
    height: 20px;
    padding: 1px;
  }
  div.progress{
    background-color: green;
    border-radius: 25%;
    width: 50%;
    height: 100%;
    -webkit-transition:width 350ms ease-in-out, height 350ms ease-in-out;
    -moz-transition:width 350ms ease-in-out, height 350ms ease-in-out;
    -o-transition:width 350ms ease-in-out, height 350ms ease-in-out;
    transition:width 350ms ease-in-out, height 350ms ease-in-out;
  }

From my javascript I change the width size with document.getElementById......

How can I change the color of the progress for example when the inside bar is the 90% of the container width to red?

Something like this

Thanks

Answer 1

you can use linear gradient property. not necessary to do in js.

 #grad1 { height: 20px; background: linear-gradient(to left, #FF5733 30%, #36FF33 30%, #36FF33 100%); } 

 <div id="grad1"></div>