SVG 요소로 매우 쉽게 로딩 중 아이콘을 배치

로딩 중을 나타내는 표시기 아이콘 ( Throbber )을 넣고 싶습니다

그렇다고해서 이미지를 두고 싶지 않습니다.

라이브러리도 사용하고 싶지 않습니다

CSS도 괴롭히고 싶지 않습니다

정말 우리 떡으로 어지러운 사람(나)을 위해서도,
HTML에 SVG 요소를 복사하는 것만으로 매우 손쉽게 할 수 있는 로드중 아이콘.

SVG 요소

아래의 HTML을 복사하면 갑자기 움직입니다. (단, 모던 브라우저에 한함)

3/4 원호 버전

<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M94,50 a44,44,0,1,1,-44,-44" stroke="#369" fill="none" stroke-width="12">
        <animateTransform attributeName="transform" type="rotate" dur="1s" from="0,50,50" to="360,50,50" repeatCount="indefinite" />
    </path>
</svg>

1/2 원호 버전

<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M94,50 a44,44,0,0,0,-88,0" stroke="#369" fill="none" stroke-width="12">
        <animateTransform attributeName="transform" type="rotate" dur="1s" from="0,50,50" to="360,50,50" repeatCount="indefinite" />
    </path>
</svg>

실제 동작 보기

맞춤형

svg 요소

width 와 height 로 크기를 자유자재로 지정할 수 있습니다.

시력 검사와 같은 GIF의 Throbber는 위에서 100px , 50px , 32px , 16px

path 요소

stroke 속성에서 원하는 색상을 지정합니다.

stroke-width 로 두께 지정. 굵게 하면 튀어나오므로 viewBox도 잘 펼쳐 주세요.

animationTransform 요소

dur 속성으로 회전 속도 제어

사용 용도

나는 「추가의 HTML 요소를 쓰는 양이 적다 & 그것 같은 로드중 아이콘을 할 수 있다」 때문에, Throbber의 가두기나, 사용 용도가 한정된 시스템에 사용하고 있습니다.

좀 더 디자인이 정교한 SVG 로딩 중 아이콘을 원한다면 다음 등을 추천합니다.

SVG Loading icons
ht tp // 코데펜. 이오 / 아우 r / 펜 / 지 G