Loader element

​

When to Use

• After quizzes - “Analyzing your answers…”
• Before results - “Calculating your score…”
• Pre-paywall - “Preparing your personalized plan…”
• Before offers - “Finding best deals for you…”
• Post-signup - “Creating your account…”

​

How It Works

1. User completes quiz/form
2. Loader appears with message
3. Progress bar fills over time
4. At 100%, trigger next action
5. User sees “personalized” result

​

Configuration

​

Loader Type

• Shows clear start to finish
• Users see time remaining
• Best for 3-10 second waits

• No defined endpoint
• Continuous motion
• Best for quick loads

​

Duration

• 1-2 seconds - Quick transition
• 3-5 seconds - Build anticipation
• 5-8 seconds - Create investment
• 8+ seconds - Risk abandonment

​

Progress Display

• Shows: “45% complete”
• Creates: Clear expectation
• Best for: Longer durations

• Cleaner appearance
• Less pressure
• Better for short waits

​

Messaging Strategy

​

Processing Messages

"Processing..."
"Please wait..."
"Loading..."

"Analyzing your responses..."
"Calculating your results..."
"Finding perfect match..."

"Reviewing 10,000+ options..."
"Comparing 50+ plans..."
"Checking exclusive deals..."

​

Progressive Messaging

0-33%: "Analyzing your profile..."
34-66%: "Matching preferences..."
67-100%: "Preparing results..."

​

Triggers

​

On Complete (100%)

• Navigate - Go to results page
• Show element - Reveal hidden content
• Trigger popup - Display outcome
• Start animation - Dramatic reveal

​

On Progress

• At 25%: Update message
• At 50%: Show preview
• At 75%: Build excitement
• At 100%: Final action

​

Psychology of Waiting

​

The IKEA Effect

• Waiting = Investment
• Investment = Commitment
• Commitment = Higher conversion

​

Anticipation Building

Quiz → Loader → Result
Effort → Process → Reward

​

Personalization Theater

• “Analyzing YOUR answers”
• “Based on YOUR profile”
• “Customized for YOU”

​

Common Patterns

​

Quiz to Results

Page 1: Quiz questions
Page 2: Loader (5 seconds)
  "Analyzing your answers..."
  "Calculating personality type..."
  "Preparing your profile..."
Page 3: Personalized results

​

Price Calculator

Input: User preferences
Loader: "Calculating best price..."
  Show: "Checking 50+ options..."
  Progress: Linear with percentage
Result: "Your price: $X/month"

​

Match Finding

Profile: User details
Loader: "Finding perfect matches..."
  Duration: 4 seconds
  Type: Circular
Results: "We found 3 perfect options!"

​

Account Creation

Signup: Email/password
Loader: "Setting up your account..."
  Show percentage: Yes
  Duration: 3 seconds
Dashboard: Welcome screen

​

Mobile Optimization

• Large progress bars
• Clear percentages
• Readable messages
• Smooth animations

• Lightweight animations
• No heavy graphics
• Battery efficient
• Works on slow connections

• Blocks interaction during load
• Prevents accidental taps
• Clear visual feedback

​

Combining with Other Elements

​

Loader + Processing

Multiple loaders in sequence:
1. "Analyzing profile..." ✓
2. "Checking availability..." ✓
3. "Applying discounts..." ✓
Result: Comprehensive process feeling

​

Loader + Timer

Loader: "Reserving your spot..."
Result page: "Spot reserved for {{timer}}"
Creates urgency after investment

​

Loader + Variables

"Analyzing {{user-name}}'s responses..."
"Finding plans in {{user-city}}..."
Increases personalization feeling

​

Best Practices

​

Duration Guidelines

• After simple form: 2-3 seconds
• After quiz: 4-6 seconds
• Before paywall: 3-5 seconds
• Complex calculation: 5-8 seconds

​

Message Guidelines

• Use action verbs (analyzing, calculating)
• Include specifics (500+ options)
• Reference user input
• Build value proposition

​

Visual Guidelines

• Match brand colors
• Sufficient contrast
• Smooth animations
• Clear completion

​

Common Mistakes

​

Too Long

• Over 8 seconds loses users
• Test optimal duration
• Err on shorter side

​

No Value Message

• Don’t just say “Loading…”
• Explain what’s happening
• Build anticipation

​

Fake Errors

• Never show fake failures
• Always deliver on promise
• Maintain trust

​

Testing Variables

1. Duration - 3 vs 5 vs 7 seconds
2. Type - Linear vs circular
3. Messages - Generic vs specific
4. Percentage - Show vs hide
5. Placement - When to use loader

​

Troubleshooting

​

Conversion Impact

​

Next Steps

• Add Processing element for multi-step loads
• Show results after loader
• Track completion with analytics
• Test durations with A/B tests