[Example] Progressbar, % bar

[MrBearPresident]

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.dev_gf_hw_pir_battery
styles: |-
  :host{
      --color-ok-icon: green ;
      --color-warning-icon: orange ;
      --color-alert-icon: red ;
      --color-ok: #85A408AA ;
      --color-warning: #E77910AA ;
      --color-alert: #CA3333AA ;
      --color-bar: ${state > 40 ? 'var(--color-ok)'
                     : state > 20 ? 'var(--color-warning)'
                     : 'var(--color-alert)'} ;
      --color-background: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
      --color-notification-bubble: red;
  }

  ha-icon {
    color: var(${ state > 40 ? '--color-ok-icon':
                  state > 20 ? '--color-warning-icon' :
                              '--color-alert-icon'}) 
              !important; }

  .bubble-button-card-container {
      background: linear-gradient(
    to right, 
    var(--color-bar) 0%, 
    var(--color-bar) ${Math.round(state)}%, 
    var(--color-background) ${Math.round(state)}%,
    var(--color-background) 100%
  ) !important;
  }

  ha-card::after {
    position: absolute;
    top: -10px;
    left: -10px;
    padding: 0 10px;
    border-radius: 999px;
    border: 0px solid black;
    color: #fff;
    content: "${Math.round(state) < 40 ? '!' : ''}";
    background: var(--color-notification-bubble);
    display: block;
  }
icon: ""
name: ""
sub_button: []
layout_options:
  grid_columns: 2
  grid_rows: 1
card_layout: large

Extra features:

• Color change based on percentage
• Notification round on the left to pull attention on alerts

[falkio8]

Thank you very much for that code. Looks great but I am struggling to implement it based on a different entity than defined in the bubble-card entity. I tried different options but none of them worked. So is there a way to use a different entity than the variable "state"? Tried it with "states("another_entity")" and so on...

var(--color-bar) ${Math.round(**state**)}%, var(--color-background) ${Math.round(**state**)}%,

[killtux]

wow that looks amazing. would be cool if this could get implemented as a seperate bubble card 😊

[johndoe0815]

@MrBearPresident Your code works great for me. In a second step, I'd like to combine that with fading the button/making it gray when the device is offline, as otherwise it is still just displaying the last status.

So instead of your

.bubble-button-background {
    background: linear-gradient(
  to right, 
  var(--color-bar) 0%, 
  var(--color-bar) ${Math.round(hass.states['sensor.a1mini_druckfortschritt'].state)}%,
  var(--color-background) ${Math.round(hass.states['sensor.a1mini_druckfortschritt'].state)}%,
  var(--color-background) 100%
) !important;
}

I was trying something like

.bubble-button-background {
    background: ${state === 'offline' ? 'rgba(210,210,210,1)' : linear-gradient(
  to right, 
  var(--color-bar) 0%, 
  var(--color-bar) ${Math.round(hass.states['sensor.a1mini_druckfortschritt'].state)}%,
  var(--color-background) ${Math.round(hass.states['sensor.a1mini_druckfortschritt'].state)}%,
  var(--color-background) 100%
) } !important;
}

But that does not work. Do you know how to embed this progress bar into some if...then...else?

[MrBearPresident]

It would be easier to just set the background color and the active color to the desired color.

:host{
    --color-ok: #36A1D3AA ;
    --color-warning: #E77910AA ;
    --color-alert: #CA3333AA ;
    --color-offline: #D2D2D2AA ;
    --color-bar: ${state != 'offline' ? 'var(--color-ok)'
                 : 'var(--color-offline)'} ;
    --color-background-og: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
    --color-background: ${state != 'offline' ? 'var(--color-background-og)'
                 : 'var(--color-offline)'};
}

.bubble-button-card-container {
    background: linear-gradient(
  to right, 
  var(--color-bar) 0%, 
  var(--color-bar) ${Math.round(hass.states['sensor.a1mini_druckfortschritt'].state)}%,
  var(--color-background) ${Math.round(hass.states['sensor.a1mini_druckfortschritt'].state)}%,
  var(--color-background) 100%
) !important;
}

[johndoe0815]

That is a good idea that did not come to my mind - and as usual perfectly done working out of the box, thanks!
Just one question: What does it actually mean to have those different color variables one after the other in this line:

--color-background-og: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));

Content-wise so far I do not understand what this is doing compared to just setting one single color.

[MrBearPresident]

Ah this is something I didn't know either before starting my adventures with bubble-card.
A var is a saved variable that flows downstream, so a parent element could have a var, and the child can also use this var.
For calling the var we use var(name, value). If the name points to a var that does not exist, it will use value as the fallback.
In this way if you cascades this. You get something like this.

if var(--bubble-button-main-background-color) exist use that, else ....
  if var(--bubble-main-background-color) exist use that, else ....
     if var(--background-color-2) exist use that, else ....
        if var(--secondary-background-color) exist use that, else ....

[falkio8]

Here is a small guide to get this to work with a climate card: #996 (reply in thread)

[jaaneo]

Amazing job!

[John5373]

Trying to do something similar here, but instead mimic the visual appearance of slider button to show state, but remove the sliding functionality. I can't quite get the CSS right, especially to dynamically adjust with the light color. The top button is a normal slider. The middle button is the one I am trying to match the top button. I assume it is just a matter of using the correct variables, but not sure what they are. For testing purposes I just used static colors (which come back inverted). Using the bubble theme

 :host{

    --color-bar: #9933ffAA;
    --color-background: #3333ffAA;
}

.bubble-button-card-container {
    background: linear-gradient(
  to right, 
  var(--color-bar) 0%, 
  var(--color-bar) ${Math.round((hass.states['light.office_lamp_upstairs'].attributes.brightness) / 255 * 100)}%,
  var(--color-background) ${Math.round((hass.states['light.office_lamp_upstairs'].attributes.brightness) / 255 * 100)}%,
  var(--color-background) 100%
) !important;
}

Appreciate any help here.

[MrBearPresident]

So you need a combination of #1000 and this.
Resulting in something like:

:host{
    --color-bar:  ${hass.states[entity].attributes.rgb_color ? 'rgba('+hass.states[entity].attributes.rgb_color+`, 0.66)`: '#9933ffAA'};
    --color-background: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
}

.bubble-button-card-container {
  background: linear-gradient(
    to right, 
    var(--color-bar) 0%, 
    var(--color-bar) ${Math.round((hass.states[entity].attributes.brightness) / 255 * 100)}%,
    var(--color-background) ${Math.round((hass.states[entity].attributes.brightness) / 255 * 100)}%,
    var(--color-background) 100%
  ) !important;
}

[John5373]

Thanks!

Here is the result.... This is what I could not figure out. Looking at it now, I think the background from the switch button is interfering.

[NicolasVanhecke]

@John5373 Care to share the entire yaml for these cards?

[Neokimx]

I used this code snipped to display my battery percentages. But with the latest bubble card releases it's not working for me anymore. Could someone possibly create a module out of this, that noobs like could use it?

[MrBearPresident]

Could you please share your yaml?

[Neokimx]

I removed the styling since it didn't work anymore for me. But basically I just used the code from your first message in this thread and changed the entities and colors to match my usecase.
Does your code still work in the current bubble card release?
Wouldn't it be nice to have the progress % bar as a slider as a module?

[MrBearPresident]

Yes it works for me.
Anyhow could you share your yaml?

[Neokimx]

Ok, I just deleted everything and copy/pasted your code again. It works again.
Back then I wanted to get rid of the notification icon thingy and started deleting random lines of codes since I have no clue of CSS styling. Maybe I deleted something important for it to work after the latest releases of bubble card.

This is my stlyes code now:

styles: |-
  :host{
      --color-bar: ${state > 40 ? 'var(--good-color)'
                     : state > 20 ? 'var(--medium-color)'
                     : 'var(--bad-color)'} ;
      --color-background: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
  }

  .bubble-button-card-container {
      background: linear-gradient(
    to right, 
    var(--color-bar) 0%, 
    var(--color-bar) ${Math.round(state)}%, 
    var(--color-background) ${Math.round(state)}%,
    var(--color-background) 100%
  ) !important;
  }

Thanks for the help. I really appreciate this progress bar thing.
But still the question: Could you make a module out of it?
Noobs like me would be able to use it more safely :D

[Velo1901]

Thanks for this card, modify it with bubble card beta 3 for my Hyundai to see the EV status.

[Clooos]

In v3.0 this template is not needed anymore, you can go to Slider settings, then toggle "Disable entity filter for custom slider", then pick your entity, set the min and max values, and it's done 🙂

[Velo1901]

Thanks, my coding skills are a bit rusty. I try to use the dashboard of mysmarthome and he is using a lot of your bubble card. But with the new 3.0 version it’s a way easier for me to create my own. Although I hope I can ask you sometimes for help. Like I have now. The dashboard of mysmarthome use kiosk-mode to remove the header of the mobile versie of HA and it’s how I have it now.  <img width="584" alt="Screenshot 2025-05-03 at 08 07 23" src="https://github.com/user-attachments/assets/96215a52-5da7-46af-88d9-80ccb8e1154d" /> But I would like the have the menu button (left top) inside the horizontal menu. Is this possible? entity: input_boolean.kiosk_mode hold_action: action: toggle tap_action: action: call-service service: | [[[ this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true})); return none; ]]]

…

On 2 May 2025, at 17:52, Cloos ***@***.***> wrote: In v3.0 this template is not needed anymore, you can go to Slider settings, then toggle "Disable entity filter for custom slider", then pick your entity, set the min and max values, and it's done 🙂 — Reply to this email directly, view it on GitHub <#928 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BEEE3WF6S23KCXWEGHZK2RD24OIC3AVCNFSM6AAAAABR43RADGVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGMBRGU3TQOA>. You are receiving this because you commented.

[wackelfinger]

Thanks for this Style, i also like to use it with negativ entitis. For an example is the state -1489 then the bar should be red and is it 899 then it should be green, is this also possible?
Thanks for any help