⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch

Share your Projects! Dashboards & Frontend
,
1660

Dear @Cloos ,

I have completely shifted my dashboard to bubble card, except one button which I am using from mushroom card.

In the screenshot there are two buttons, the above one is from mushroom card and the below is from bubble card.

I am able to add the required animation to button using bubble card. I have no idea how to add the below two things which I am using with the button using mushroom card.

  1. The badge on the icon which tells how much time is remaining for the switch.
  2. The ring(progress bar).

Mushroom Card Button Code

type: custom:mushroom-template-card
icon: "{{ 'mdi:fountain' if is_state(entity, 'on') else 'mdi:fountain' }}"
icon_color: "{{ 'green' if is_state(entity, 'on') else 'grey' }}"
primary: Fountain
entity: switch.fountain
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
       {% if is_state(config.entity, 'on') %}
          --card-background-color: rgba(21, 38, 18,1);
       {% else %}
         --card-background-color: rgba(87, 72, 30,1); 
       {% endif %}
        background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--icon-color) {{  (states("counter.fountain_timer")|int/60/states("input_number.fountain_inching")|int*100 ) }}% 0%, var(--card-background-color) 0% 100%);
      }
    .: |
      ha-state-icon {
        {% if is_state(config.entity, 'on') %}
          animation: fountain 1.5s ease infinite;
        {% endif %}  
      }  
      mushroom-shape-icon:after {
        {% if is_state(config.entity, 'on') %}
          content: '{{ states('input_number.fountain_inching')|int-(states("counter.fountain_timer")|float/60)|round(0) }}';
        {% endif %}                      
        
        position: absolute;
        top: -11%;
        right: -11%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 15px;
        height: 15px;
        font-size: 10px;
        font-weight: 700;
        background-color: rgba(var(--rgb-amber), 0.5);
        border-radius: 50%;
      }
      @keyframes fountain { 
        0%, 100% { clip-path: polygon(0 100%,0 0, 100% 0, 100% 100%); }
        50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
        60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
        70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
        80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
      }

Bubble Card Button Code

type: custom:bubble-card
card_type: button
icon: mdi:fountain
name: Fountain
entity: switch.fountain
styles: |-
  .bubble-icon {
    animation: ${hass.states['switch.fountain'].state === 'on' ? 'fountain 1.5s ease infinite' : ''};
    color: ${hass.states['switch.fountain'].state === 'on' ? 'green' : 'grey'} !important;
  } 
  @keyframes fountain { 
    0%, 100% { clip-path: polygon(0 100%,0 0, 100% 0, 100% 100%); }
    50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
    60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
    70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
    80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
  } 
  .bubble-button-background {
    opacity: 1 !important;
    background-color: ${state === 'on' ? 'green' : 'none'} !important;
  }

@Cloos How to make the badge and circular progressbar using bubble card button.

I would really appreciate your help and guidance.

Thank you.

2 Likes