svg 로딩 애니메이션 만들기

svg 태그를 활용하면 역동적인 애니메이션을 만들기 쉽다.
svg 태그로 원을 그리고 css로 애니메이션을 주는 원리이다.

<div class="loading">
    <!-- viewBox - 해당 svg를 어느크기로 볼 것인지를 정한다.  -->
    <!-- viewBox 를 540px로 하고 circle 크기가 54px, 해당 div 크기도 54px이라면 circle이 1/10 크기로 작게 보인다.  -->
    <svg class="loading-circle" viewBox="">
        <!-- cx, cy 좌표이동, r 반지름 -->
        <circle cx="50%" cy="50%" r="25"></circle>
    </svg>
</div>

@keyframes loading-circle-ani {
	0% { stroke-dashoffset: 157; }
	75% { stroke-dashoffset: -147; }
	100% { stroke-dashoffset: -157; }
}

.loading {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.loading-circle {
    width: 54px;
    height: 54px;
}

.loading-circle circle {
    stroke: black;
    stroke-width: 4;
    /* getTotalLength()로 stroke의 길이를 얻어올 수 있음 */
    stroke-dasharray: 157;
    stroke-dashoffset: 0;
    fill: transparent;
    animation: loading-circle-ani 1s infinite;
    /* transition: 1s; */
}

stroke-width: 4px; 이면 전체 넓이는 58px이어야 되는거 아니야?

stroke-width는 border와 달리 안팎으로 반반씩 생긴다.
즉 stroke-width가 4px이라면 안쪽에 2px, 바깥쪽에 2px씩 생긴다.

stroke-dasharray

stroke-dashoffset

stroke-dashoffset 속성으로 선들을 이동시킬 수 있다.(부호로 방향설정 가능)
위 두 개의 속성을 활용하여 애니메이션을 만들 것이다.

처음 그려진 선을 stroke-dashoffset으로 이동시켜서 처음 그려진 선 바깥쪽으로 벗어나게하면 벗어난 부분은 눈에 안보이게된다.
이렇게 안 보이게하고 다시 원래위치로 돌려놓으면 선이 그어지는 것처럼 보이게 된다.

이런 원리로 애니메이션을 만들 것이다.

원둘레 구하는 방법

지름 X 3.14

위 예제에선 지름 50이므로 원둘레가 대략 157이 나온다.

원둘레 구하는 다른 방법

document.querySelector('.loading-circle circle').getTotalLength();

원둘레 알아서 어디다 써?

stroke-dashoffset으로 원둘레 안보이게 할 때 사용한다.
알아낸 원둘레로 다음과 같이 애니메이션을 적용한다.

@keyframes loading-circle-ani {
	0% { stroke-dashoffset: 157; }
	75% { stroke-dashoffset: -147; }
	100% { stroke-dashoffset: -157; }
}

원둘레만 돌아가면 재미없으니 원 자체도 돌려주자.

@keyframes loading-spin {
	100% { transform: rotate(360deg); }
}

LHJ

svg 로딩 애니메이션 만들기