Softonic

버튼 스피너 CSS 생성기

단계 1 / 2
다음

버튼 안의 스피너는 클릭이 제대로 접수되었고 다시 누를 필요가 없다는 것을 알려 줍니다. 여기서 작고 얇은 링을 만든 뒤 CSS를 복사해 버튼 레이블 옆에 놓으세요.

버튼 스피너 만드는 방법

  1. 1

    작은 크기 사용하기

    크기 칸에 16 또는 18을 입력해 링이 버튼 글자 높이에 맞도록 합니다.

  2. 2

    링을 얇게 만들기

    두께를 2로 설정해 이 크기에서도 호가 선명하게 보이도록 합니다.

  3. 3

    색 맞추기

    움직이는 호의 색을 고릅니다. 예를 들어 어두운 버튼이라면 흰색입니다.

  4. 4

    조금 빠르게 하고 복사하기

    한 바퀴에 0.8초로 설정한 뒤 CSS를 복사합니다.

작업 예시

진한 파란색 “저장” 버튼에 흰색 글자가 있다고 해 봅시다. 생성기에서 크기 16, 두께 2, 색상 #ffffff, 속도 0.8을 입력합니다. 도구는 다음과 같은 CSS를 만듭니다.

.loader {
  width: 16px;
  height: 16px;
  border: 2px solid #eee;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

트랙은 고정된 밝은 회색이라 어두운 버튼 위에서도 잘 보입니다. 트랙을 더 은은하게 하고 싶다면, 붙여 넣은 CSS에서 #eee를 rgba(255, 255, 255, 0.3)처럼 반투명한 값으로 바꾸세요. 호의 색은 선택한 색 그대로입니다.

버튼 안에 배치하기

스피너 요소를 레이블 앞에 두고, 버튼을 플렉스 행으로 만들어 두 요소가 간격을 두고 한 줄에 놓이도록 합니다.

<button class="save" type="submit" disabled>
  <span class="loader" role="status" aria-label="저장 중"></span>
  저장 중
</button>

.save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

요청이 진행되는 동안에만 스피너와 disabled 상태를 추가하세요. 끝나면 둘 다 제거합니다. 중복 제출을 막는 것은 버튼 비활성화이고, 스피너는 그 이유를 알려 주는 신호입니다.

버튼용 크기와 두께

버튼 글자 크기 스피너 크기 두께
14px 14px 2px
16px 16~18px 2px
18~20px 20~24px 3px

참고 사항

  • 생성기는 원형 링 하나만 만듭니다. 버튼은 만들지 않으므로 버튼 스타일은 그대로 유지됩니다.
  • 지름의 4분의 1보다 두꺼운 링은 채워져서 원반처럼 보이므로, 작은 크기에서는 얇은 값을 사용하세요.
  • 스피너 옆에는 레이블을 두세요. 텍스트 없는 스피너는 일부 사용자가 의미를 파악하기 어렵습니다.

레이아웃 흔들림 막기

스피너가 나타나면서 버튼이 갑자기 넓어지면 레이아웃이 밀리고 클릭 위치도 바뀝니다. 간단한 해결책이 두 가지 있습니다. 하나는 버튼에 스피너와 더 긴 레이블이 모두 들어갈 최소 너비를 주는 것입니다. 다른 하나는 레이블 앞에 16px짜리 빈 자리표시자를 처음부터 보여 주어 스피너 공간을 미리 확보하는 것입니다. 생성된 링은 너비와 높이가 픽셀로 고정되어 있어서, 필요한 공간을 정확히 확보하기 쉽습니다.

자주 묻는 질문

대략 버튼 글자의 높이와 비슷하게, 보통 14~20픽셀입니다. 그렇게 하면 스피너가 나타나도 버튼이 커지지 않습니다.

대부분의 양식에서는 그렇습니다. 비활성화하면 중복 제출을 막을 수 있고, 스피너가 다른 것을 클릭할 수 없는 이유를 방문자에게 설명해 줍니다.

트랙은 밝은 회색이고 호는 여러분이 고른 색입니다. 밝은 버튼에서는 더 진한 호 색을 고르고, 붙여 넣은 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 코드로 확인하세요.

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

사용 가이드와 활용 사례