[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