SDC Pattern Library

CountdownAnimation

Collated components via countdownAnimation.config.js

<div class="time js-timeout">

    <svg class="time__visual" width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="40" cy="40" r="40" stroke="#D3D3D3" stroke-width="6" fill="none"></circle>
    <circle class="time__circle js-timeout-circle" cx="40" cy="40" r="40" transform="rotate(-90 40 40)" fill="none" stroke="red" stroke-width="6" stroke-linecap="round"></circle>
  </svg>

    <div class="time__text venus js-timeout-time">0:00</div>

</div>
 
{
  "width": "40",
  "widthDouble": "80"
}