CODEWITHSUNDEEP
javascripthtmlcss
Hanzo
Hanzo

Reputation: 1899

Apply different color depending of width size of a div?

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

enter image description here

Thanks

Upvotes: 0

Views: 604

Answers (1)

sarathkumar
sarathkumar

Reputation: 191

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>

Upvotes: 1

Related Questions