CSS progress bar width set by inline style, not being applied

Question

My CSS progress bar renders everything except the inline style is not applied so the size of the progress contents does not dynamically change as expected. The value of {{ field_ct_rack_left_pdu__value }} is pushed from a Drupal View.

Here is the HTML:

<div class="iab-progress-bar" data-label="{{ field_ct_rack_left_pdu__value }}%" style="width:{{ field_ct_rack_left_pdu__value }}%"</div>

Here is the CSS:

.iab-progress-bar {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 3em;
  background-color: #111;
  border-radius:1em;
  color: white;
  margin-bottom:10px;
  }

.iab-progress-bar::before {
  content: attr(data-label);
  display: flex;
  align-items: center;
  position: absolute;
  left: .5em;
  top: .5em;
  bottom: .5em;  
  /*width:3%;*/
  min-width: 2rem;
  max-width: calc(100% - 1em);
  background-color: #fc7703;
  border-radius: 1em;
  padding: 1em;
 }

Rendered progress bar

When I use the width: attribute in the .iab-progress-bar::before selector the bar expands as expected.

The data-label attribute contains the correct value.

I have tried playing around with the data-label attribute in the width: selector but of course I have not been successful.

Thanks for your time and thoughts.

Answer 1

Try like this

Html :

<div class= "iab-progress-bar">
<div class="iab-progress-bar_Fill" data-label="20%" style="width:20%" 
</div></div>

Css:

.iab-progress-bar {
 position: relative;
 box-sizing: border-box;
 width: 100%;
 height: 3em;
 background-color: #111;
 border-radius:1em;
 color: white;
 margin-bottom:10px;
 }

.iab-progress-bar_Fill{
content: attr(data-label);
display: flex;
align-items: center;
position: absolute;
left: .5em;
top: .5em;
bottom: .5em;  
min-width: 2rem;
max-width: calc(100% - 1em);
background-color: #fc7703;
border-radius: 1em;
padding: 1em;
}

Now it works dynamically while changing the value

Answer 2

Trying another approach. Here's the CSS:

 

     .iab-progress-bar-cont {
     height:25px;
     background-color: gray;
     position: relative;
     border-radius:7px;
     width: 100%;
     color:white;
    }

    .iab-progress-bar-cont::before {
     content: attr(dyn-width);
    }

    .iab-progress-bar-cont .iab-progress-bar-fill {
     position:absolute;
     height: 100%;
     border-radius:7px;
     background-color: red;
     animation: progress-animation 3s forwards;
     
    }


    @keyframes progress-animation {
     0% {width: 0%;}
     100% {width: var(dyn-width);}
    }

Here's the HTML:

<div class="iab-progress-bar-cont" dyn-width="{{ 
field_ct_rack_right_pdu__value }}%">
<div class="iab-progress-bar-fill" >
</div>
</div>

This CSS code creates a bar and it animates to full width:

@keyframes progress-animation {
 0% {width: 0%;}
 100% {width: 100%;}

This CSS code creates a bar,but does not animate. The correct value is 
being applied to the dyn-width variable (see linked pic): 

@keyframes progress-animation {
0% {width: 0%;}
100% {width: var(dyn-width);}

screenshot

Thanks again for your time and thoughts.