GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

AI 채팅 CSS 로딩 애니메이션 9종

· Godrich · 9종 · 6분 읽기

로딩SCSSCSS만로딩대시보드

ChatGPT나 Claude 같은 AI 채팅창에서 답이 오기를 기다릴 때 뜨는 점 세 개, 깜빡이는 커서, 서서히 나타나는 글자는 전부 CSS 로딩 애니메이션입니다. div 하나로 끝나는 아홉 가지를 코드와 함께 모았습니다.

생각중 점 3개01 ai-chat-loading-thinking-dots Thinking… 텍스트 쉬머02 ai-chat-loading-text-shimmer-status 스트리밍 커서 깜빡임03 ai-chat-loading-streaming-caret 메시지 버블 등장04 ai-chat-loading-bubble-pop-in 스크롤 가장자리 페이드05 ai-chat-loading-scroll-fade-edges 도구 호출 단계 표시06 ai-chat-loading-tool-step-progress 단어 단위 페이드 인07 ai-chat-loading-token-fade-words 전송→정지 버튼 모핑08 ai-chat-loading-stop-button-morph 정적 상태 뱃지 대체09 ai-chat-loading-reduced-motion-badge

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아홉 가지는 인기 순이 아니라 AI 채팅창에서 실제로 벌어지는 순서를 따릅니다. 먼저 답을 기다리는 동안 보이는 대기 신호(01~03)를 지나, 답이 도착하고 대화가 쌓이는 순간(04~05)으로, 그다음은 AI가 도구를 쓰며 일하는 과정과 글자가 이어지는 방식(06~07)을 거쳐, 마지막은 사용자가 생성을 멈추는 조작과 움직임을 줄인 사람을 위한 대체 표시(08~09)로 끝납니다. 답변이 얼마나 남았는지 비율로 보여 주려면 원형 프로그레스바 게이지가 그 눈금이고, 기다림 자체를 화면으로 꾸미려면 로딩 화면 디자인이 옆자리입니다.

01생각중 점 3개

화면에서 벌어지는 일

메시지를 보내고 AI가 답을 준비하는 동안, 빈 말풍선 자리에 작은 점 세 개가 순서대로 커졌다 작아지며 사람이 타자를 치는 듯한 자연스러운 대기 신호를 보여줍니다.

생각중 점 3개
새 창에서 열기

01 · 생각중 점 3개 — 측정 누적면적 0.225% · 움직인 프레임 21/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

scale@keyframes1.2s

어떻게 만들었나

@keyframes td-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30% { transform: translateY(-6px); opacity: 1; }
}
.td-bubble.is-loading .td-dot,
.td-bubble.is-demo .td-dot {
  animation: td-bounce $duration $easing infinite;
}
.td-bubble.is-demo .td-dot:nth-child(2) { animation-delay: 160ms; }
.td-bubble.is-demo .td-dot:nth-child(3) { animation-delay: 320ms; }

02Thinking 텍스트 쉬머

어떻게 보이나

검색이나 요약처럼 시간이 걸리는 작업에서는 점 대신 상태 문구를 보여주고, 그 글자 위로 밝은 빛줄기가 지나가게 해 아직 진행 중이라는 걸 알립니다.

Thinking… 텍스트 쉬머
새 창에서 열기

02 · Thinking… 텍스트 쉬머 — 측정 누적면적 0.287% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

background-positionbackground-clip: text1.6s

코드 읽는 법

.sh-label {
  background-image: linear-gradient(
    90deg,
    rgba(23, 20, 26, .3) 0%,
    rgba(23, 20, 26, .3) 42%,
    $color 50%,
    rgba(23, 20, 26, .3) 58%,
    rgba(23, 20, 26, .3) 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: rgba(23, 20, 26, .3);
}

03스트리밍 커서 깜빡임

타이핑 애니메이션 css 는 어디에 쓰나

답변 글자가 실시간으로 이어질 때는 문장 끝에 짧은 커서를 붙여 opacity로 깜빡이게 하면, 지금 이 자리에 다음 글자가 계속 도착하고 있다는 걸 보여줄 수 있습니다.

스트리밍 커서 깜빡임
새 창에서 열기

03 · 스트리밍 커서 깜빡임 — 측정 누적면적 0.272% · 움직인 프레임 7/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

opacitysteps()530ms

코드의 요점

.cr-caret {
  display: inline-block;
  width: $sp-2;
  height: 1em;
  margin-left: $sp-1;
  vertical-align: -0.2em;
  background: $color;
}

@keyframes cr-blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: .25; }
}
.cr-line.is-demo .cr-caret,
.cr-line.is-demo .cr-tail {
  animation: cr-blink $duration $easing infinite;
}

04메시지 버블 등장

어떤 화면인가

답변이 완성되면 빈 자리에 있던 말풍선이 살짝 커졌다 제자리로 돌아오며 나타나, 답이 막 도착했다는 걸 눈에 띄게 알립니다.

메시지 버블 등장
새 창에서 열기

04 · 메시지 버블 등장 — 측정 누적면적 13.303% · 움직인 프레임 8/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

scaleopacitycubic-bezier

동작 원리

@keyframes bp-pop {
  0%   { transform: scale(.82); opacity: 0; }
  15%  { transform: scale(1.05); opacity: 1; }
  25%  { transform: scale(1); opacity: 1; }
  70%  { transform: scale(1); opacity: 1; }
  85%  { transform: scale(.9); opacity: 0; }
  100% { transform: scale(.82); opacity: 0; }
}
.bp-bubble.is-demo {
  animation: bp-pop $duration $easing infinite;
}

05스크롤 가장자리 페이드

무엇이 움직이나

메시지가 쌓여 채팅창에 스크롤이 생기면, 위아래 끝을 옅게 지워 글자를 자르지 않고도 아직 더 볼 내용이 있다는 걸 알려줍니다.

스크롤 가장자리 페이드
새 창에서 열기

05 · 스크롤 가장자리 페이드 — 측정 누적면적 27.117% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

mask-imagetranslateYoverflow: hidden

만드는 방식

.sf-viewport {
  overflow: hidden;
  // 가장자리 페이드 — 이 마스크는 고정. 움직이는 건 안의 트랙뿐
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 $sp-8, #000 calc(100% - #{$sp-8}), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 $sp-8, #000 calc(100% - #{$sp-8}), transparent 100%);
  padding: $sp-4 0;
}

움직이는 건 마스크가 아니라 그 안의 목록입니다. 같은 메시지 목록을 두 벌 이어 붙이고 translateY(-50%)로 반씩 밀면, 절반 지점에서 다음 벌이 똑같은 자리에 오기 때문에 이어 붙인 자국 없이 계속 흐르는 것처럼 보입니다.

06도구 호출 단계 표시

어디에 쓰나

AI가 검색하거나 문서를 읽는 것처럼 도구를 순서대로 쓸 때는 단계를 세로로 늘어놓고, 끝난 단계마다 원이 체크로 바뀌며 연결선이 아래까지 채워지게 해 지금 어디까지 진행됐는지 보여줍니다.

도구 호출 단계 표시
새 창에서 열기

06 · 도구 호출 단계 표시 — 측정 누적면적 0.112% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

scaleYstroke-dashoffsetJS 6줄

왜 이렇게 만들었나

.ts-line {
  grid-column: 1;
  justify-self: center;
  width: 2px;
  height: $sp-6;
  background: rgba(23, 20, 26, .18);
  transform-origin: top;
  transform: scaleY(0);
}

@keyframes ts-line-fill { 0%, 5% { transform: scaleY(0); } 25%, 100% { transform: scaleY(1); } }
@keyframes ts-check-2   { 0%, 25% { stroke-dashoffset: 16; } 40%, 100% { stroke-dashoffset: 0; } }

.ts-list.is-demo .ts-line--1      { animation: ts-line-fill $duration $easing infinite; }
.ts-list.is-demo .ts-icon--2 path { animation: ts-check-2 $duration $easing infinite; }

실제 화면에서는 도구 이벤트가 올 때마다 짧은 자바스크립트가 .is-done 클래스를 붙여 같은 CSS를 한 번씩만 재생시킵니다.

function tsAdvance(list, n) {
  var steps = list.querySelectorAll('.ts-step');
  var lines = list.querySelectorAll('.ts-line');
  for (var i = 0; i < n; i++) steps[i].classList.add('is-done');
  for (var i = 0; i < n - 1; i++) lines[i].classList.add('is-done');
}

07단어 단위 페이드 인

눈에 보이는 것

완성된 문장이 한 번에 뜨는 대신 단어마다 살짝 아래에서 위로 순서대로 떠오르게 하면, 토큰이 실시간으로 이어붙는 스트리밍 느낌을 낼 수 있습니다.

단어 단위 페이드 인
새 창에서 열기

07 · 단어 단위 페이드 인 — 측정 누적면적 2.202% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

translateYanimation-delaynth-child

구현의 핵심

@keyframes wf-word {
  0%, 100% { opacity: 0; transform: translateY(6px); }
  15%, 78% { opacity: 1; transform: translateY(0); }
  92%      { opacity: 0; transform: translateY(6px); }
}
.wf-line.is-demo span {
  animation: wf-word $duration $easing infinite;
}
.wf-line.is-demo span:nth-child(1) { animation-delay: 0ms; }
.wf-line.is-demo span:nth-child(2) { animation-delay: 90ms; }
.wf-line.is-demo span:nth-child(3) { animation-delay: 180ms; }

08전송→정지 버튼 모핑

어떤 상황인가

전송을 누르면 종이비행기 아이콘이 옅어지며 작아지고 그 자리에 정지 사각형이 겹쳐 나타나, 버튼 모양은 그대로 두고 안의 아이콘만 바뀌게 합니다.

전송→정지 버튼 모핑
새 창에서 열기

08 · 전송→정지 버튼 모핑 — 측정 누적면적 0.176% · 움직인 프레임 10/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

scaleopacity200ms

무엇이 핵심인가

@keyframes sm-send {
  0%, 12%  { opacity: 1; transform: scale(1); }
  30%, 62% { opacity: 0; transform: scale(.5); }
  80%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes sm-stop {
  0%, 12%  { opacity: 0; transform: scale(.5); }
  30%, 62% { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(.5); }
}

09정적 상태 배지 대체

무슨 일이 일어나나

평소엔 상태 점이 box-shadow와 scale로 은은하게 맥박치지만, 시스템에서 동작 줄이기를 켠 사람에게는 같은 배지의 애니메이션만 꺼져 같은 자리에 움직임 없는 정적 상태로 남습니다.

정적 상태 뱃지 대체
새 창에서 열기

09 · 정적 상태 뱃지 대체 — 측정 누적면적 0.278% · 움직인 프레임 19/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

box-shadowprefers-reduced-motionscale

짚어 둘 점

@keyframes rb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 109, 246, .55); transform: scale(1); }
  70%  { box-shadow: 0 0 0 8px rgba(47, 109, 246, 0); transform: scale(1.15); }
  100% { box-shadow: 0 0 0 0 rgba(47, 109, 246, 0); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .rb-badge.is-demo .rb-dot {
    animation: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

AI 채팅 로딩 애니메이션은 어디서 깨지는가

무엇이 문제인가

css 로딩바 애니메이션과 달리 끝이 정해져 있지 않은 05번이 가장 자주 걸려 넘어지는 지점입니다. translateY(-50%) 무한 루프는 목록을 정확히 두 벌 이어 붙였을 때만 이음새 없이 흐르고, 한쪽만 항목을 추가하거나 목록 사이에 gap을 넣으면 절반 지점이 어긋나 한 바퀴마다 눈에 띄게 튑니다. 03번의 커서도 마찬가지로 실제 글자 폭을 width로 애니메이션하면 레이아웃이 매 프레임 다시 계산돼 버벅이므로, 이 글의 아홉 개는 전부 transform과 opacity만 움직이고 커서는 폭 고정 블록을 깜빡이는 쪽을 택했습니다.

어떻게 피하나

타이핑 리듬이 멈춰 보이는 끊김은 자리는 두고 내용만 갈아 끼우는 탭 메뉴 전환에서도 같은 프레임 배분 규칙으로 다스립니다.

06번의 연결선도 height가 아니라 transform-origin: top에 scaleY를 걸어야 다른 요소를 밀어내지 않습니다. 이 압축 파일을 열 때 쓰는 비밀번호는 2r7u46js 표시가 있는 자리에, 상자 없이 이 문장 속 평범한 글자로만 적어 뒀습니다. Safari 구버전은 mask-image에 -webkit- 접두사가 꼭 있어야 05번이 보이니, 접두사를 지우지 않도록 주의해야 합니다.

접근성 — 아홉 개가 reduced-motion에서 남기는 것

reduced-motion 에서 남는 것

시스템에서 동작 줄이기를 켜면 아홉 개 전부 prefers-reduced-motion: reduce에서 애니메이션을 끕니다. 01·02·03·04·05·08처럼 장식적인 신호는 그냥 멈춘 마지막 상태로 보이면 충분하지만, 06의 단계 표시와 07의 단어 순서는 정보 자체가 움직임으로 전달되므로 애니메이션을 끄는 대신 선과 단어를 곧바로 완료된 상태로 고정해, 움직이지 않아도 지금 상황을 알 수 있게 했습니다. 09번은 이 원칙을 가장 노골적으로 보여주는 항목으로, 맥박치는 점 대신 움직임 없는 배지를 아예 별도로 준비해 둡니다.

이어서 볼 글

로딩 상태가 아니라 뼈대 형태의 대기 화면을 찾는다면 스켈레톤 UI CSS 9종 글도 참고할 만하고, 회전형 스피너만 모아 보고 싶다면 CSS 로딩 스피너 9종에 더 있습니다.

FAQ — 자주 묻는 질문

css 로딩 스피너 말고 어떤 걸 먼저 써야 하나요?

답 대기 시간이 1초 안팎이면 01번 점 세 개나 02번 쉬머면 충분합니다. 실제로 토큰이 하나씩 도착하는 스트리밍 응답이라면 03번 커서나 07번 단어 페이드처럼 진행 상황을 보여주는 쪽이 사용자에게 더 안심을 줍니다.

아이콘 없이 순수 CSS만으로 되나요?

01·02·03·04·05·07·09번은 순수 CSS와 SCSS 변수만으로 동작합니다. 06번은 체크 아이콘에 작은 SVG를 하나 쓰고, 06·08번은 실제 서비스에서 상태를 전환할 때 클래스를 붙이는 자바스크립트가 몇 줄 필요합니다.

zip 안의 vanilla와 React 코드가 다른가요?

겉보기 동작은 같지만 값을 넘기는 통로가 다릅니다. 바닐라 판은 SCSS 맨 위 세 변수를 수정해야 하고, React 판은 컴포넌트에 duration·easing·color를 props로 넘기면 내부에서 CSS 커스텀 속성으로 바뀌어 같은 화면을 만듭니다. 마우스 방향에 따라 무늬가 흐르는 카드로 만들고 싶다면 CSS 홀로그램 카드 효과가 그 마감입니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.