CODEWITHSUNDEEP
cssangularcolors
oudekaas
oudekaas

Reputation: 315

progress bar changing color based on percentage width

I am trying to change the css of the HTML classes skill and skill-level, I tried getElementsByClassName('skill_level') and noticed that this returns an Object of all the skill-level elements, however I can't seem to change the color of the elements. Ie. how do I loop over this object and check for the width of the element.

If the width is for instance 33% I want the color to be orange and more than 33% less than 66% orange.

.skill {
    background: #262626;
    height: 20px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid red;
    padding: 0;
    margin: 0;
    border-radius: 2;
}

.skill_level {
  background-color: red;
  margin: 2px;
  box-sizing: border-box;
  height: 14px;
  text-align: center;
  padding: 0;
}

<div class="boxDetails">
 <p>Transparancy</p>
 <p>{{key.transparent}}/{{key.transparentTotal}}</p>
  <div class="skill" >
   <div class="skill_level" 
    [ngStyle]="{ 'width': key.transparentPercentage}">
    {{key.transparentPercentage}}
   </div>
  </div>
</div>

Upvotes: 1

Views: 1347

Answers (1)

user184994
user184994

Reputation: 18301

Why not use the standard angular functionality?

[ngClass]="{ 'orange': key.transparentPercentage > 33, 'red': key.tranparentPercentage > 66}"

This will apply the CSS class orange if the percentage is > 33, or 'red' if is greater than 66

Upvotes: 2

Related Questions