SVG 및 CSS로 로딩 애니메이션 만들기

웹 서버, 외부 CDN 또는 타사 Javascript 플러그인에서 자산 로드를 포함하지 않는 웹 프로젝트용 로드 애니메이션을 만드는 가장 좋은 방법 중 하나는 렌더링에 사용하는 것과 동일한 웹 기술을 사용하여 웹 앱 내에서 애니메이션을 만드는 것입니다. 그들을.
이렇게 하면 애니메이션이 필요할 때 바로 나타나도록 하여 사용자 연결 속도에 따라 사용자 경험이 영향을 받지 않도록 합니다.

이 튜토리얼에서는 HTML과 CSS를 사용하여 웹 프로젝트를 위한 간단한 로딩 애니메이션을 만들 것입니다.

우리가 추구하는 최종 결과는 다음 애니메이션입니다.


다음 html 템플릿을 추가합니다.

<div class="svg-loader">
    <svg class="svg-container" height="100" width="100" viewBox="0 0 100 100">
        <circle class="loader-svg bg" cx="50" cy="50" r="45"></circle>
        <circle class="loader-svg animate" cx="50" cy="50" r="45"></circle>
    </svg>
</div>

위의 그림에서 알 수 있듯이 애니메이션 템플릿은 두 개의 원을 겹쳐서 구성하고 첫 번째 원은 두 번째 원보다 두껍습니다.

원 내부의 cx 및 cy 속성은 각각 두 원의 x축 및 y축 좌표입니다. 그들은 두 원이 같은 좌표의 중심에 있는지 확인합니다.

다음 CSS를 추가합니다.

.svg-loader{
  display:flex;
  position: relative;
  align-content: space-around;
  justify-content: center;
}
.loader-svg{
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  fill: none;
  stroke-width: 5px;
  stroke-linecap: round;
  stroke: rgb(64, 0, 148);
}
.loader-svg.bg{
  stroke-width: 8px;
  stroke: rgb(207, 205, 245);
}

위의 CSS는 로드 구성 요소가 컨테이너 내 중앙에 있는지 확인하고 두 원에 대해 다른 획 너비와 색상이 있는지 확인합니다.

그런 다음 CSS를 사용하여 첫 번째 원 위에 놓일 두 번째 원에 애니메이션을 적용하여 로딩 애니메이션을 완료합니다.

.animate{
  stroke-dasharray: 242.6;
  animation: fill-animation 1s cubic-bezier(1,1,1,1) 0s infinite;
}

@keyframes fill-animation{
  0%{
    stroke-dasharray: 40 242.6;
    stroke-dashoffset: 0;
  }
  50%{
    stroke-dasharray: 141.3;
    stroke-dashoffset: 141.3;
  }
  100%{
    stroke-dasharray: 40 242.6;
    stroke-dashoffset: 282.6;
  }
}

다음은 위의 CSS에서 진행 중인 작업입니다.
우리가 원을 그릴 때 그것은 단순히 원의 처음부터 끝까지 우리 모양의 윤곽을 그리는 단일 대시 스트로크입니다. stroke-dasharray 속성은 이를 대시와 간격의 패턴으로 나눌 수 있는 기능을 제공합니다. 이 기능을 활용하여 원하는 애니메이션 최종 결과를 얻을 수 있습니다.

위와 같은 부드러운 애니메이션 효과를 얻으려면 원의 원주를 알아야 합니다. 여기서 원주 = 2 x pi x 반지름입니다. 그런 다음 stroke-dasharray 속성을 사용하여 둘을 추가할 때 둘레 길이를 유지하면서 애니메이션의 다른 상태에서 크기를 번갈아 가며 최대 하나의 대시와 간격을 그립니다.

원 반지름이 45이면 둘레가 282.6이 됩니다. 따라서 stroke-dasharray 값을 141.3으로 설정하면 대시와 간격이 동일한 값을 가지므로 합이 282.6이 됩니다.

stroke-dashoffset 속성은 연결된 대시 배열의 렌더링에서 오프셋을 정의하는 표시 속성입니다. 이 오프셋은 로딩 애니메이션에 회전 효과를 제공합니다. 그렇지 않으면 애니메이션이 깨진 것처럼 보입니다. 이것이 채우기 애니메이션 애니메이션에서 일어나는 모든 것입니다.
이 애니메이션이 무한히 계속되도록 .animation 클래스를 사용하여 이 애니메이션을 두 번째 원에 적용하여 마무리합니다.

이것은 SVG 및 CSS로 만들 수 있는 애니메이션 종류의 기초일 뿐이며, 웹 프로젝트를 위한 빠르고 픽셀 완벽한 로딩 애니메이션을 만드는 실험적이고 창의적입니다.