CSS 애니메이션 로딩

문제 설명

순수 CSS를 사용하여 창의적인 로딩 애니메이션을 구현하세요.

요구사항

• JavaScript 없이 순수 CSS만 사용
• 부드러운 60fps 애니메이션
• 접근성 고려 (prefers-reduced-motion)
• 다양한 화면 크기 대응

구현할 로딩 스타일

1. 회전하는 도넛 모양
2. 튀어오르는 점들
3. 물결 효과
4. 진행 바

제공되는 HTML

<div class="loader loader-1"></div>
<div class="loader loader-2">
  <span></span><span></span><span></span>
</div>
<div class="loader loader-3"></div>
<div class="loader loader-4"></div>

평가 기준

• 애니메이션 부드러움
• 창의성
• 코드 효율성