Softonic

간단한 CSS 스피너 생성기

단계 1 / 2
다음

가장 간단한 CSS 스피너는 빈 요소 하나와 약 10줄의 CSS만 있으면 됩니다. 여기서 크기, 색상, 속도를 고르면 추가 파일 없이 깔끔하고 단순한 로더를 복사할 수 있습니다.

간단한 스피너 얻는 방법

  1. 1

    기본값으로 시작하기

    60px 링, 6px 테두리, 1초 회전으로 된 기본 설정은 이미 일반적인 로더로 쓸 수 있습니다.

  2. 2

    필요한 것만 바꾸기

    대부분의 프로젝트는 색만 바꾸면 충분합니다. 색상 칸을 사용하고 나머지는 그대로 두세요.

  3. 3

    CSS 복사하기

    CSS 상자 옆의 복사 버튼을 누르세요.

  4. 4

    요소 하나 추가하기

    스피너가 나타나야 할 곳에 loader 클래스를 가진 빈 div를 넣으세요.

이 스피너가 단순한 이유

많은 로더는 여러 겹의 요소, 배경 이미지, 스크립트를 사용합니다. 이 스피너는 원 모양으로 꾸민 div 하나입니다. 고리는 테두리로 만들어지며, 테두리 중 윗부분만 다른 색입니다. 원을 회전시키면 색이 다른 부분이 돌아갑니다. 기법은 다음 네 가지 아이디어로 이루어집니다.

  1. 너비와 높이가 같은 정사각형 상자.
  2. border-radius: 50%로 상자를 원으로 만들기.
  3. 한쪽만 색이 있는 회색 테두리, border-top-color로 지정.
  4. 멈추지 않는 회전 애니메이션.

전체 코드

.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); }
}

<div class="loader"></div>

로더는 이것이 전부입니다. 내려받을 것도, 계속 업데이트해야 할 의존성도 없습니다.

가운데 맞추기

고리는 일반 블록 요소입니다. 페이지나 컨테이너 안에서 가운데에 두려면, 가로 가운데 정렬을 위해 .loader에 margin: 0 auto;를 추가하거나, 부모를 flex 컨테이너로 만드세요.

.loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

이 도구가 하지 않는 것

  • 고리 모양의 스타일만 만듭니다. 점 줄, 막대, 맥박형 로더는 다른 디자인입니다.
  • 트랙 색은 밝은 회색으로 고정되어 있습니다. 배경이 어둡다면 붙여 넣은 CSS에서 수정하세요.
  • 마크업에 접근성 속성을 추가하지 않습니다. role="status"와 aria-label은 요소에 직접 추가하세요.

복사 후 작은 조정

스피너는 속성이 몇 개뿐이라 수정하기 쉽습니다. 고리를 더 가볍게 보이게 하려면 테두리 너비를 줄이세요. 더 차분하게 느껴지게 하려면 애니메이션 시간을 늘리세요. 같은 로더를 두 가지 크기로 쓰려면, 클래스를 한 번 복사한 다음 두 번째 클래스에서 width, height, border-width만 덮어쓰세요. 코드를 짧게 유지하는 것이 간단한 스피너의 가장 큰 장점입니다. 전체를 한눈에 읽을 수 있고, 라이브러리를 뒤지지 않고도 어떤 값이든 바꿀 수 있습니다.

트랙 색은 #eee를 페이지에 어울리는 색으로 바꿔 물들일 수 있습니다. 움직이는 호는 생성기에서 고른 색을 그대로 유지합니다.

자주 묻는 질문

생성된 스피너는 10줄짜리 클래스와 3줄짜리 keyframes 규칙을 사용합니다. 작동하는 로더를 만들기에 충분합니다.

아니요. 고리는 테두리와 회전으로 그려지므로, 불러올 이미지 파일이나 아이콘이 없습니다.

너비와 높이가 같아야 합니다. 이 생성기는 두 값에 같은 크기를 사용하므로, 타원이 보인다면 프로젝트의 다른 규칙이 둘 중 하나를 덮어쓰고 있을 가능성이 큽니다.

생성되는 요소는 비어 있습니다. 글자를 옆에 두거나 둘을 컨테이너로 감쌀 수는 있지만, 고리 자체는 테두리로 만든 원일 뿐입니다.

관련 도구

보색 찾기

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

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

사용 가이드와 활용 사례