스크립트 없이 CSS만으로 로딩 스피너 4종 만들기 – keyframes와 transform 완전 정복

 

 

안녕하세요 😊
자바스크립트 없이도 CSS만으로 로딩 애니메이션을 충분히 만들 수 있습니다.
아래 예제 4가지는 실무에서 바로 가져다 쓰기 좋도록 HTML 1줄 + CSS 몇 줄로 구성했습니다.

 

1) 기본 원형 스피너 (border 회전)

 

<div class="spinner" aria-busy="true" aria-label="로딩 중"></div>

 

.spinner {
  width: 40px; height: 40px;
  border: 3px solid #e9ecef;
  border-top-color: #1abc9c;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

2) 점 3개 점멸 스피너

<div class="dots" aria-busy="true"><span></span><span></span><span></span></div>

.dots { display: inline-flex; gap: 6px; }
.dots span {
  width: 8px; height: 8px; border-radius: 50%; background:#1abc9c;
  animation: blink 1s infinite ease-in-out;
}
.dots span:nth-child(2){ animation-delay:.15s; }
.dots span:nth-child(3){ animation-delay:.3s; }
@keyframes blink { 0%,80%,100%{ opacity:.2 } 40%{ opacity:1 } }

3) 바 형태(progress-like)

 

<div class="bar" aria-busy="true"></div>

.bar{
  width: 120px; height: 4px; background: #e9ecef; overflow: hidden; border-radius: 999px;
}
.bar::before{
  content:""; display:block; width:40%; height:100%;
  background:#1abc9c; animation: slide 1.2s ease-in-out infinite;
}
@keyframes slide{
  0%{ transform: translateX(-60%) }
  50%{ transform: translateX(80%) }
  100%{ transform: translateX(160%) }
}

4) 스켈레톤(Shimmer) 로더

 

<div class="skeleton-card" aria-busy="true"></div>

 

.skeleton-card{
  width: 240px; height: 120px; border-radius:12px;
  background: linear-gradient(90deg,#eee,#f5f5f5,#eee);
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer{ to{ background-position: -200% 0; } }

접근성 & 모션 최소화 팁

 

@media (prefers-reduced-motion: reduce){
  .spinner,.dots span,.bar::before,.skeleton-card{ animation: none !important; }
}

• aria-busy="true"로 스크린리더에 로딩 상태를 알려드립니다.
• 모션 민감 사용자를 위해 prefers-reduced-motion 대응을 권장드립니다.