Softonic

로딩 스피너 CSS 생성기

단계 1 / 2
다음

로딩 스피너는 페이지, 패널, 버튼이 아직 작업 중이라는 것을 방문자에게 보여 줍니다. 아래에서 크기, 링 두께, 색상, 속도를 설정하고 미리 본 뒤, 완성된 로딩 스피너 CSS를 스타일시트에 복사하세요.

로딩 스피너 CSS를 얻는 방법

  1. 1

    크기 고르기

    지름을 픽셀 단위로 입력합니다. 콘텐츠 영역에는 40~60 정도, 줄 안에서 쓸 때는 더 작게 설정하세요.

  2. 2

    두께와 색 고르기

    링의 두께를 픽셀로 설정하고, 색상 칸에서 움직이는 호의 색을 고르세요.

  3. 3

    속도 설정하기

    한 바퀴를 도는 데 걸릴 초를 입력합니다. 1이 흔히 쓰는 기본값입니다.

  4. 4

    CSS 복사하기

    CSS 상자 옆의 복사 버튼을 사용하고, 규칙을 스타일시트에 붙여 넣으세요.

얻게 되는 것

생성기는 두 가지 규칙을 씁니다. .loader 클래스와 @keyframes spin 블록입니다. 클래스는 원을 그리고, 원에 밝은 회색 링을 주고, 링의 윗부분에 색을 입힙니다. keyframes는 원을 한 바퀴 회전시키고, animation 줄이 그것을 영원히 반복합니다. 그 밖에는 아무것도 필요하지 않습니다. 이미지 파일도, 아이콘 폰트도, 스크립트도 없습니다.

기본값(60px, 6px 링, #10b981, 1초)으로 만들면 결과는 다음과 같습니다.

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

페이지에 추가하기

CSS를 스타일시트에 붙여 넣고, 로더가 나타나야 할 곳에 빈 요소 하나를 두세요.

<div class="loader" role="status" aria-label="로딩 중"></div>

작업이 진행되는 동안 요소를 보여 주고, 콘텐츠가 도착하면 요소를 제거하거나 display: none으로 숨기세요. role과 aria-label 속성 덕분에 화면 낭독기가 상태를 알려 줄 수 있습니다.

알맞은 크기

놓이는 위치 크기 두께
작은 버튼 안 16~20px 2px
한 줄 텍스트 옆 20~28px 3px
카드나 패널 40~60px 4~6px
빈 페이지 가운데 60~100px 6~8px

대략적인 기준으로, 두께는 지름의 약 10분의 1로 맞추세요. 그보다 훨씬 얇으면 고해상도 화면에서 흐리게 보이고, 훨씬 두꺼우면 고리가 덩어리처럼 보입니다.

알아 두면 좋은 점

  • 트랙 색은 밝은 회색(#eee)으로 고정되어 있습니다. 배경이 어둡다면 붙여 넣은 CSS에서 이 값을 바꾸세요.
  • 도구가 만드는 것은 원형 스피너 하나뿐입니다. 점, 막대, 다른 모양은 다른 마크업이 필요합니다.
  • 프로젝트에 이미 loader 클래스나 spin 애니메이션이 있다면, 규칙이 충돌하지 않도록 붙여 넣은 CSS에서 이름을 바꾸세요.

보이기와 숨기기

로딩 스피너는 작업이 시작될 때 나타나고, 끝나면 사라져야 합니다. 간단한 방법은 요소에 hidden 속성을 둔 채로, 요청이 시작될 때 그 속성을 제거하는 것입니다. 대기 시간이 보통 아주 짧다면, 고리를 보여 주기 전에 몇 백 밀리초의 짧은 지연을 두어 즉시 응답이 오는 경우 스피너가 깜빡이지 않도록 하세요. 어떤 방법을 쓰든, 오류가 발생했을 때도 반드시 스피너를 숨기세요. 그렇지 않으면 방문자는 이미 실패한 것을 계속 기다리게 됩니다.

자주 묻는 질문

네. 출력물은 클래스 하나와 @keyframes 규칙 하나로 된 일반 CSS라서, 어떤 백엔드에서든 어떤 스타일시트나 style 블록에서든 작동합니다.

기본적으로 요소를 숨겨 두고, 요청이 시작되면 보여 주세요. 요청이 끝나면 다시 숨깁니다. 이는 여러분의 코드에서 클래스를 바꾸거나 hidden 속성으로 제어합니다.

생성된 CSS는 원의 윗부분 테두리에만 색을 입힙니다. 원이 회전하면 그 색이 있는 호 하나가 밝은 회색 링 위를 돌아다니며, 빙글빙글 도는 모습을 만들어 냅니다.

네. 모든 값이 일반 CSS 속성이므로, 스타일시트에서 너비, 테두리, 색상, 애니메이션 시간을 직접 편집할 수 있습니다.

관련 도구

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. 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 코드로 확인하세요.

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

사용 가이드와 활용 사례