volume-indicator and timer-countdown around icon

[ArveVM]

use tips from Rhysb to make usefull indicators of volume for media-players and countdown for the adguard "non-block"

Look at the answer to this post: https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/4901?u=arvevm

[ArveVM]

working sample:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: input_number.test_input_number
    icon: mdi:volume-high
    icon_color: blue
    content: '{{ (states(entity) | float ) | round(0) }}% Volume'
    card_mod:
      style: |
        ha-card:before {
          content: "";
          position: absolute;
          height: var(--chip-height);
          width: var(--chip-height);
          border-radius: 70%;
          background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-cyan)) {{ (states(config.entity) |float ) | round(0) }}% 0%, var(--card-background-color) 0% 100%);
        }
        ::slotted(ha-icon) {
          margin-right: 0.4em !important;
        }