Loading States

Animated indicators for async operations. ThinkingSteps during AI response, grading loading screen, and generating dots pattern.

ThinkingSteps

Animated thinking indicator from the interview chat. Shows cycling status text with a pulsing violet dot. Imported from @/components/shared/ThinkingSteps.

  • Аналізую відповідь...
PropTypeDefaultDescription
language"ua" | "en"---Language for thinking step labels (required)

Grading Loading Screen

Full-screen loading state from GradingScreen. Large pulsing dot (size-8) + cycling status text. Centered vertically.

Аналізую відповіді...

Generating Dots

Three bouncing dots pattern used in voice thinking state and various loading indicators.

Small (size-2)
Medium (size-2.5)
Primary color
Sergiy Klimkovych

Need a design system like this?

I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.

Product Designer | AI Design Engineer | Designer for Startups | Mobile & Complex SaaS | from Idea to Product | Framer Developer