코닉 그라디언트 스피너
div 하나. conic-gradient로 꼬리가 흐려지는 링을 만들고 mask로 가운데를 뚫은 뒤 돌린다. 이미지·SVG 없이 CSS 3줄.
AI에게 이렇게“conic-gradient와 mask로 꼬리가 사라지는 도넛형 로딩 스피너 만들어줘.”
핵심 코드도트 바운스 로더
점 3개에 같은 keyframes, 다른 delay. 파도처럼 통통. 스피너보다 부드러운 인상이라 챗·검색 UI에 잘 맞는다.
AI에게 이렇게“점 세 개가 파도 타듯 순서대로 통통 튀는 로딩 인디케이터 만들어줘.”
핵심 코드스켈레톤 시머 (콘텐츠 뼈대)
진짜 콘텐츠 모양대로 회색 블록을 깔고 밝은 광택이 지나가게 한다. 스피너보다 체감 대기시간이 짧다 — 유튜브·페북이 쓰는 이유.
AI에게 이렇게“카드 로딩 중에 유튜브처럼 회색 뼈대에 광택이 흐르는 스켈레톤 UI 보여줘.”
핵심 코드확정 프로그레스 바
진행률을 아는 작업(업로드·다운로드)엔 반드시 % 숫자와 함께. 바 width와 숫자를 같은 값으로 묶는다.
AI에게 이렇게“업로드 진행률을 바와 퍼센트 숫자로 같이 보여주는 프로그레스 바 만들어줘.”
핵심 코드무한(불확정) 프로그레스
진행률을 모르는 작업엔 토막 바가 좌→우로 계속 흐른다. 유튜브 상단 빨간 바가 이것. 확정/불확정을 구분해 쓰는 게 UX의 기본.
AI에게 이렇게“진행률을 모르는 작업용으로, 토막 바가 계속 흐르는 무한 프로그레스 바 만들어줘.”
핵심 코드성공 체크 드로우
결제·저장 완료 화면의 그 체크. 원이 먼저 그려지고 체크가 이어 그려진다(딜레이 체이닝). stroke-dashoffset 두 개면 끝.
AI에게 이렇게“완료되면 원이 그려지고 이어서 체크가 그려지는 성공 애니메이션 만들어줘.”
핵심 코드에러 셰이크 (도리도리)
틀리면 입력창이 고개를 젓는다. 좌우 진폭이 점점 줄어드는 감쇠가 자연스러움의 비결. 빨간 테두리+메시지와 세트로.
AI에게 이렇게“비밀번호 틀리면 입력창이 좌우로 도리도리 흔들리고 빨간 에러 메시지가 나타나게 해줘.”
핵심 코드버튼 상태 몰프 (제출→로딩→완료)
누르면 버튼이 원으로 수축해 스피너가 되고, 끝나면 초록 체크로. width·border-radius 전환 + 상태 클래스 3개의 상태기계.
AI에게 이렇게“제출 버튼 누르면 원형 스피너로 줄어들었다가 완료되면 초록 체크로 바뀌게 해줘.”
핵심 코드타이핑 인디케이터 (챗)
‘상대가 입력 중’ 말풍선. 도트 바운스를 말풍선 모양(한쪽 모서리만 뾰족) 안에 넣은 것. AI 챗 응답 대기 UI의 표준.
AI에게 이렇게“챗봇이 답변 준비 중일 때 말풍선 안에서 점 세 개가 물결치는 타이핑 인디케이터 보여줘.”
핵심 코드