angular-countdown/src/template.html

Radial countdown timer for Angular

<svg
  ng-if="!countdown.done"
  class="countdown"
  ng-attr-width="{{countdown.diameter}}"
  ng-attr-height="{{countdown.diameter}}"
  ng-attr-viewbox="0 0 {{countdown.diameter}} {{countdown.diameter}}"
>
  <defs>
    <mask ng-attr-id="countdown-mask-{{countdown.$id}}">
      <circle cx="50%" cy="50%" ng-attr-r="{{countdown.radius}}" fill="#fff" />
      <circle cx="50%" cy="50%" ng-attr-r="{{countdown.radius - countdown.stroke}}" fill="#000" />
    </mask>
  </defs>
  <g ng-attr-mask="url(#countdown-mask-{{countdown.$id}})">
    <path
      class="countdown-border"
      ng-attr-id="loader-{{countdown.$id}}"
      ng-attr-transform="translate({{countdown.radius}}, {{countdown.radius}})"
      ng-attr-d="M 0 0 v -{{countdown.radius}} A {{countdown.radius}} {{countdown.radius}} 1 {{countdown.mid}} 1 {{countdown.x}} {{countdown.y}} z"
    />
  </g>
</svg>