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.
- Аналізую відповідь...
| Prop | Type | Default | Description |
|---|---|---|---|
| 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
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn