Custom:bar-card

Configuration Frontend
1

hi there,

I have a sensor contains few attributes:

sensor
sensor603×745 56.1 KB

I want to display the progress bar and the label with color of my senor ‘Couleur’ attribut it’s ok with the CSS for Label but i don’t know how proceed for the bar progress’s color.

Progress bar
Progress bar485×212 15.3 KB

Anyone have any idea?
Thanks

My code

type: custom:bar-card
entities:
  - entity: sensor.qualite_globale_saint_paer
    icon: mdi:alert-circle
    height: 30px
    min: 0
    max: 8
    positions:
      indicator: "none"
      icon: "none"

card_mod:
  style: |
    bar-card-contentbar {
      font-size: 10px;
    }
    bar-card-currentbar {
      border-radius: 10px;
    }
    bar-card-value {
      font-size: 0px;
      margin-right: 25px;
      font-weight: bold;
    } 
    bar-card-value:after {
      font-size: 16px;
      color: {{ state_attr("sensor.qualite_globale_saint_paer", "Couleur") }};
      content: '{{ state_attr('sensor.qualite_globale_saint_paer', 'Libellé') + ' (' + states('sensor.qualite_globale_saint_paer') + '/8)'  }}';
    }
    bar-card-backgroundbar {
      border-radius: 10px;
        background: red;
        background-color: gray;
        color: black;
    }
    bar-card-name {
      font-size: 16px;
      font-weight: bold;
      color: transparent;
      margin-left: 15px;
    }
    ha-card {
      margin-top: -2px;
      background: none;
      border: none;
      
    }