Custom-card "Bar Card"

This is a custom-card to display a percentage value as a bar.

Credits

Author: rphlwnk - 2021 Version: 1.0.0 Update: JStaegerino - 2026 Version 2.0.0

Changelog

2.0.0

rebase code and make it work

1.0.0

Initial release.

0.1.1

Fix for UI Minimalist v1.0.1.

0.1.2

Fix border radius

Requirements

This card needs the following to function correctly:

Custom Card 'Bar-Card'

Usage

- type: "custom:button-card"
  template: custom_card_bar_card
  entity: sensor.memory_use_percent
  variables:
    ulm_custom_card_bar_card_name: Memory Usage
    ulm_custom_card_bar_card_value: true
    ulm_custom_card_bar_card_indicator: true
    ulm_custom_card_bar_card_color: "var(--google-green)"
    ulm_custom_card_bar_card_min: 10
    ulm_custom_card_bar_card_max: 20

Variables

Variable	Default	Required	Notes
entity			Your entity-id for the bar
ulm_custom_card_bar_card_name			Overwrites the sensor name
ulm_custom_card_bar_card_min	0		Change the minimum value of the bar
ulm_custom_card_bar_card_max	100		Change the maximum value of the bar
ulm_custom_card_bar_card_value	false		If true, shows the value in the bar
ulm_custom_card_bar_card_color	blue		Change the color of the bar
ulm_custom_card_bar_card_icon			Overwrites the sensor icon
ulm_custom_card_bar_card_icon_color			Overwrites the sensor icon color
ulm_custom_card_bar_card_show_icon	true		If false, hides icon and title

Example

- type: "custom:button-card"
  template: custom_card_bar_card
  entity: sensor.memory_use_percent
  variables:
    ulm_custom_card_bar_card_name: Memory Usage

Template Code

custom_card_bar_card.yaml

---
custom_card_bar_card:
  template:
    - "extended_card"
  variables:
    ulm_custom_card_bar_card_color: "var(--google-blue)"
    ulm_custom_card_bar_card_min: "0"
    ulm_custom_card_bar_card_max: "100"
    ulm_custom_card_bar_card_name: "[[[ return entity.attributes.friendly_name; ]]]"
    ulm_custom_card_bar_card_icon: "[[[ return entity.attributes.icon ]]]"
    ulm_custom_card_bar_card_icon_color: ""
    ulm_custom_card_bar_card_show_icon: true
  triggers_update: "all"
  styles:
    custom_fields:
      item1:
        - display: >
            [[[
              return variables.ulm_custom_card_bar_card_show_icon ? 'block' : 'none';
            ]]]
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "card_generic"
        variables:
          ulm_card_generic_icon: "[[[ return variables.ulm_custom_card_bar_card_icon; ]]]"
          ulm_card_generic_name: "[[[ return variables.ulm_custom_card_bar_card_name; ]]]"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              custom_fields:
                item1:
                  card:
                    type: "custom:button-card"
                    styles:
                      icon:
                        - color: >
                            [[[
                              var color = variables.ulm_custom_card_bar_card_icon_color;
                              if (variables.ulm_custom_card_bar_card_icon_color){
                                return 'rgba(var(--color-' + color + '),1)';
                              }
                              return 'rgba(var(--color-theme),0.2)';
                            ]]]
                      img_cell:
                        - background-color: >
                            [[[
                              var color = variables.ulm_custom_card_bar_card_icon_color;
                              if (variables.ulm_custom_card_bar_card_icon_color){
                                return 'rgba(var(--color-' + color + '),0.2)';
                              }
                              return 'rgba(var(--color-theme),0.05)';
                            ]]]
    item2:
      card:
        type: "custom:bar-card"
        entities:
          - entity: "[[[ return entity.entity_id ]]]"
        color: "[[[ return variables.ulm_custom_card_bar_card_color ]]]"
        positions:
          icon: "off"
          indicator: "[[[ return variables.ulm_custom_card_bar_card_indicator == true ? 'inside' : 'off' ]]]"
          minmax: "off"
          title: "off"
          value: "[[[ return variables.ulm_custom_card_bar_card_value == true ? 'inside' : 'off' ]]]"
          name: "off"
        min: "[[[ return variables.ulm_custom_card_bar_card_min ]]]"
        max: "[[[ return variables.ulm_custom_card_bar_card_max ]]]"
        card_mod:
          style: |-
            bar-card-currentbar {
              border-radius: 0px !important;
              right: 0;
            }
            bar-card-backgroundbar {
              border-radius: 0px !important;
              right: 0;
            }
            #states {
              padding: 0;
              height: 35px;
            }
            bar-card-background {
              height: 35px !important;
            }
            bar-card-indicator {
              left: 10px;
            }
            bar-card-value {
              font-weight: bold;
              font-size: 12px;
            }