Softonic

CSS 스피너 애니메이션 생성기

단계 1 / 2
다음

CSS 스피너 애니메이션은 keyframes 규칙을 통해 끝없이 도는 원입니다. 여기서 회전 속도를 정하고, 움직임을 미리 보고, 클래스와 @keyframes 블록을 함께 복사합니다.

애니메이션을 조정하는 방법

  1. 1

    속도 입력하기

    속도(초) 칸에 한 바퀴를 도는 데 걸릴 초를 입력합니다. 예를 들어 0.8이나 1.2입니다.

  2. 2

    미리 보기 확인하기

    입력한 속도로 원이 바로 회전하므로, 차분한지 급박한지 바로 판단할 수 있습니다.

  3. 3

    크기와 색 조정하기

    애니메이션이 사용될 자리에 맞도록 크기, 두께, 색을 바꿉니다.

  4. 4

    CSS 복사하기

    생성된 규칙을 복사하세요. 애니메이션 줄과 keyframes는 함께 작동합니다.

애니메이션의 구성

생성된 CSS는 짝을 이루어 작동하는 두 부분으로 되어 있습니다. .loader의 animation 속성은 애니메이션 이름을 지정하고, 지속 시간과 타이밍 함수를 정하며, 반복을 설정합니다.

animation: spin 0.8s linear infinite;

@keyframes spin 규칙은 움직임 자체를 설명합니다. 끝 상태가 하나뿐이며, 360도 회전입니다. 브라우저는 요소의 원래 위치에서 시작해 그 끝 상태까지 중간 값을 채워 나갑니다.

@keyframes spin {
  to { transform: rotate(360deg); }
}

도구의 속도 칸은 이 지속 시간이 됩니다. linear와 infinite를 포함한 나머지는 그대로 유지됩니다.

지속 시간 고르기

한 바퀴에 걸리는 초 느낌
0.4~0.6 빠르고 바쁜 느낌, 불안해 보일 수 있음
0.8~1 안정적인 느낌, 가장 흔한 선택
1.2~1.6 차분한 느낌, 큰 스피너에 어울림
2 이상 느리고, 멈춘 것처럼 보일 수 있음

큰 원은 작은 원보다 약간 느리게 돌아도 괜찮습니다. 큰 원의 가장자리는 1초에 더 긴 거리를 이동하기 때문입니다.

왜 linear 타이밍인가

도구는 linear를 사용해서 고리가 한 바퀴 내내 같은 각속도를 유지하도록 합니다. ease-in-out 같은 이징 곡선은 회전할 때마다 고리를 늦췄다가 다시 빠르게 만들기 때문에, 끝없는 반복에서는 끊기는 것처럼 보입니다. 그래도 그 효과를 원한다면 붙여 넣은 CSS에서 linear라는 단어를 바꾸세요.

기억해야 할 제한 사항

  • 속도를 0으로 하면 길이가 0인 애니메이션이 되어 고리가 눈에 띄게 돌지 않습니다. 0보다 큰 값을 사용하세요.
  • 스피너는 항상 시계 방향으로 돕니다. 방향을 바꾸려면 복사한 뒤 끝 회전 값을 -360deg로 바꾸세요.
  • 움직임은 하나의 연속된 회전입니다. 맥동, 튕김, 여러 단계의 움직임은 추가 keyframes를 직접 작성해야 합니다.

애니메이션 일시 정지와 제어

CSS를 페이지에 넣은 뒤에는 표준 속성으로 애니메이션을 제어할 수 있습니다. animation-play-state: paused;를 설정하면 고리가 그 자리에서 멈춥니다. 작업은 끝났지만 요소는 계속 보여야 할 때 유용합니다. animation-delay: 0.2s;를 설정하면 시작을 늦출 수 있어서, 대기 시간이 바로 끝나지 않을 때만 스피너가 나타납니다. 둘 다 복사한 뒤 .loader 규칙에 추가하는 일반적인 CSS 속성입니다.

자주 묻는 질문

속도(초) 칸의 숫자를 줄이세요. 0.6이면 한 바퀴가 0.6초에 끝나므로 1일 때보다 빠르게 돕니다.

애니메이션을 끝없이 반복합니다. 3과 같은 숫자로 바꾸면, 고리가 세 바퀴 돈 뒤 멈춥니다.

네. 두 곳에서 이름을 바꾸세요. 클래스의 animation: 뒤와 @keyframes 뒤입니다. 두 이름은 정확히 일치해야 합니다.

브라우저는 페이지 레이아웃을 다시 계산하지 않고 transform을 애니메이션할 수 있어서, 요소를 움직이는 가벼운 방법이며 보통 성능이 좋지 않은 기기에서도 부드럽게 작동합니다.

관련 도구

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

Protocol Buffers 디코더

hex, Base64, Base64URL, 텍스트 또는 파일의 Protobuf 와이어 형식 바이트를 브라우저에서 디코딩하고 정확한 필드 후보를 확인한 뒤 비공개 보고서로 내보냅니다.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

XSD 검증기

XML 문서를 XSD 스키마에 대해 검증하고, 요소와 타입 불일치를 정확한 줄 번호와 함께 보고합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

이 도구는 다른 언어로도 제공됩니다

사용 가이드와 활용 사례