디자인 아틀라스
EN
◌ 로더·로딩 갤러리

펄스 로더

Pulse Loader

하나의 점이 커지며 옅어지길 반복해, 심장박동처럼 "살아있음"을 알리는 로더.

다른 이름: Pulsing dot
···
html
<div class="wrap" role="status" aria-live="polite">
  <div class="pd" aria-hidden="true"></div>
  <span class="cap">scale + opacity 펄스</span>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.pd{width:clamp(22px,7vmin,38px);height:clamp(22px,7vmin,38px);border-radius:50%;background:var(--accent);animation:pl 1.3s ease-out infinite}
@keyframes pl{0%{transform:scale(.55);opacity:1}70%{opacity:.15}100%{transform:scale(1.5);opacity:0}}
.cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

작업이 살아있다는 것 이상은 알려주지 않는 가장 최소한의 비확정적 표시라, 실시간 연결 상태(웹소켓 연결됨, 녹화 중)를 은은하게 알리는 자리에도 잘 어울립니다. 진행률을 알 수 있는 작업에는 부적합하니 그럴 땐 progress-ring으로 바꾸세요.

점 하나에 scale과 opacity를 함께 움직이는 keyframe을 주고 ease-out 계열 타이밍으로 "커지며 사라지는" 느낌을 만듭니다. 점 하나짜리 구현이라 다른 로더보다 훨씬 적은 코드로 끝나며, 여러 개를 늘어놓으면 자연스럽게 ripple-loader에 가까워집니다.

전체 화면을 오래 가리는 로딩에는 스켈레톤이 체감 속도에 더 낫고, 200ms 이내로 끝나는 짧은 대기라면 아예 생략하는 편이 깜빡임을 줄입니다. role="status"·aria-live="polite"를 감싸는 요소에 주고 점 자체는 장식이므로 aria-hidden="true"로 숨깁니다. prefers-reduced-motion에서는 확대·축소 폭을 줄이거나 정적인 점으로 대체할 수 있습니다.