Timer-bar-card with the contdown only

Configuration Frontend
, ,
1

Good morning, I’d like to create a card with the timer-bar-card in which only the countdown appears centered on it. Has anyone tried this? Is it possible? I don’t want the bar, icon, or status to appear on it.
The ultimate goal is to create a stack-in-card where two timer-bar-cards overlap and the countdown appears centered on the bar (which changes color depending on the percentage of time elapsed until the end of the countdown). I already have the card with just the bar, but I’m missing the countdown.

Thanks!

2

I managed to do it with the following code, in case it’s useful to anyone.

type: custom:stack-in-card
cards:
  - type: custom:timer-bar-card
    entity: timer.30seg
    layout: full_row
    hide_name: true
    text_width: 0px
    invert: true
    bar_direction: rtl
    bar_width: 60%
    bar_height: 20px
    bar_radius: 10px
    bar_foreground: "#66CC00"
    transparency: 0
    mushroom:
      layout: horizontal
      icon_type: none
      primary_info: none
    modifications:
      - elapsed: 50%
        bar_foreground: orange
        bar_height: 20px
      - elapsed: 80%
        bar_foreground: red
    style: |
      ha-card {
        background: none;
        box-shadow: none;
        border: none;
      }
  - type: entities
    entities:
      - entity: timer.30seg
        secondary_info: none
        name: " "
        icon: mdi:blank
    show_header_toggle: false
    card_mod:
      style: |
        ha-card {
          align-items: center;
          font-weight: bold;
          font-shadow: 5px 5px 3px rgba(0,0,0,0.5);
          font-size: 20px;
          border: none;
          background: none;
          border: none;
          box-shadow: none;
          margin-top: -63px;
          margin-right: 60px;
        }
card_mod:
  style: |
    ha-card {
      background: none;
      height: 37px;
      border: none;
      box-shadow: none;
    }