A CSS-only counter widget

counter.css

    /**
     * Displays Countdown clock
     * Usage: <div class="countdown" style="--duration-seconds: 15;"></div>
     */
    @property --total-seconds-remaining {
      syntax: "<number>";
      initial-value: 0;
      inherits: true;
    }

    @property --display-minutes {
      syntax: "<integer>";
      initial-value: 0;
      inherits: true;
    }

    @property --display-seconds {
      syntax: "<integer>";
      initial-value: 0;
      inherits: true;
    }

    div.countdown {
      --_effective-duration: var(--duration-seconds, 60);
      --total-seconds-remaining: var(--_effective-duration);
      --display-minutes: calc(var(--total-seconds-remaining) / 60);
      --display-seconds: calc(var(--total-seconds-remaining) - (var(--display-minutes) * 60));
      --empty-segment-color: #555;
      --progress-factor-raw: calc( (var(--_effective-duration) - var(--total-seconds-remaining)) / var(--_effective-duration) );
      --progress-factor: max(0, min(1, var(--progress-factor-raw)));
      --pie-segment-color: color-mix(in hsl, green, red calc(var(--progress-factor) * 100%));
      --pie-filled-percentage: calc(var(--progress-factor) * 100%);

      display: grid;
      place-items: center;
      width: 15vw;
      height: 15vw;
      animation-name: countdown-animation;
      animation-duration: calc(var(--_effective-duration) * 1s);
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      border-radius: 50%;
      background: conic-gradient(
        var(--pie-segment-color) 0% var(--pie-filled-percentage),
        var(--empty-segment-color) var(--pie-filled-percentage) 100%
      );
      position: relative;
    }

    div.countdown::after {
      grid-column: 1;
      grid-row: 1;
      color: #fff;
      font: 5vh/1.5 ubuntu mono, consolas, monaco, monospace;
      text-align: center;
      counter-reset:
        minutes var(--display-minutes)
        seconds var(--display-seconds);
      content: counter(minutes, decimal-leading-zero) ":" counter(seconds, decimal-leading-zero);
      text-shadow: 0 0 3px #000, 0 0 5px #000;
    }

    @keyframes countdown-animation {
      to {
        --total-seconds-remaining: 0;
      }
    }