CSS 로더 스피너 생성기

로딩 인디케이터는 사용자에게 시스템이 작동 중임을 알려줍니다. 순수 CSS로 만든 로더는 이미지나 JavaScript 없이 가볍게 구현할 수 있습니다.

인기 있는 로더 유형

• 스피너: 회전하는 원 (가장 일반적)
• 도트: 3개의 점이 순서대로 페이드
• 바: 진행 막대 스타일
• 펄스: 확대/축소 반복
• 링: 부분적으로 채워진 원

기본 스피너 코드

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0,0,0,0.1);
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

좋은 로더 디자인 원칙

• 0.8~1.2초 주기로 자연스럽게
• 브랜드 색상 사용
• 크기는 콘텍스트에 맞게 (인라인 20px, 페이지 전체 60px)
• 긴 로딩에는 진행률 표시줄 고려