SVG를 이용한 Timer

SVG를 이용한 Timer 를 간단히 만들어 봄

시간은 10초

/// html

<svg  class="progress-ring" width="39" height="39" style="position:relative;top:-4px;left:16px;">  <circle class="progress-ring__circle2" stroke="#e571fe" stroke-width="2" fill="transparent" r="8" cx="16" cy="16"/> </svg>

------------------------------------------------------------------------------------------------------------------------------------------------

///css

.progress-ring__circle2 {

  transform: rotate(-90deg);

  transform-origin: 50% 50%;

  stroke-dashoffset: 0%;

  stroke-dasharray: 51;

  animation: dash2 10s linear infinite;

}

@keyframes dash2 {

  from {

    stroke-dashoffset: 51

  }

  to {

    stroke-dashoffset: 0;

  }

}

39 / 39 사이즈의 동그란 원이 시계방향으로 채워지는 형식임 

여기서 중요한 포인트는 stroke-dashoffset 의 역할과  stroke-dasharray 역할을 알아야 한다는 것이다.

실제 점선으로 채워지고 없어지고. 

나중에 다시 참고해서 stroke-dashoffset 과 stroke-dasharray 더 깊게 알아봐야 함