How to create progress indicator UI for better usability?

TL;DR
  • Progress indicator UI is crucial for managing user expectations in enterprise apps, reassuring users during tasks like data loading, file transfers, and form submissions by showing task status and progress.

  • There are two main types of progress indicators: indeterminate (for tasks with unknown durations, like loading data) and determinate (for tasks with predictable durations, like file uploads).

  • Styles of progress indicators include spinners, skeleton loaders, progress circles, progress bars, animated icons, loading messages, percentage indicators, and hybrid indicators, each serving different needs based on task type and context.

  • The choice of progress indicator depends on wait time: for short waits (1-3 seconds), use spinners or skeleton screens; for medium waits (3-10 seconds), use progress bars or percentage indicators; for long waits (10+ seconds), combine progress feedback with engaging elements like time estimates.

  • Best practices for designing progress indicators include providing clear labels, keeping animations subtle, ensuring accessibility, matching the app's brand identity, and offering meaningful feedback to users.

  • Avoid common mistakes such as using indeterminate indicators for predictable tasks, failing to provide explanatory text, overusing progress indicators, and neglecting performance optimization.

 

Deep dive

Progress indicator UI shows the status of a task, like loading or processing. It reassures users that the system is working, helps manage expectations for wait times, and reduces the perception of delays. In enterprise apps, where tasks often involve complex workflows or large data sets, progress indicators are essential for maintaining user trust and productivity.

The psychology of waiting also affects how users perceive these indicators. Research by Fiona Fui-Hoon Nahassessed found that users are more tolerant of wait times when they receive feedback, such as progress bars. In the study, participants with progress bars waited a median of 22.6 seconds, while those without any indicator waited just 9 seconds. 

When can I use progress indicators in enterprise apps? 

  • Loading dashboards or reports: Indicate when data is being retrieved or processed.

  • File uploads/downloads: Show the progress of transfers to manage user expectations.

  • Form submissions: Signal when the system is validating or saving input.

  • Bulk operations: Provide feedback for processes like exporting or batch editing data.

  • System status updates: Notify users of ongoing system processes like synchronization or scheduled updates.

What are the types of progress indicators?

Indeterminate 

Indeterminate indicators show that a process is ongoing without specifying duration or completion status. Use when:

  • The duration is unknown (e.g., searching a database).

  • The system is initiating a task (e.g., connecting to a server).

Linear Indeterminate Progress

Unknown duration

Circular Indeterminate Progress

Unknown duration

Determinate 

Determinate indicators represent the completion percentage or status of a task. Use when:

  • The process duration is predictable (e.g., uploading a file).

  • Users need exact progress information (e.g., data import operations).

Determinate Progress Indicators

Shows exact progress for predictable operations

Linear Progress

Uploading file...0%

Circular Progress

0%
Processing data...

What are the possible styles and variations of progress indicator UI?

Progress indicators come in various styles, each suited to different tasks and contexts. Choosing the right variation depends on the nature of the task, the enterprise app’s design language, and the user’s expectations.

Spinner

Purple spinner progress indicator.

A spinner is a simple circular animation that implies ongoing activity, but it does not indicate how long the process will take.

  • When to use: Ideal for short, indeterminate processes where the exact duration is unknown.

  • Examples: Searching for data, loading a small widget.

Skeleton loader or stencil

Skeleton progress indicator.

Skeleton loaders replace actual content with gray placeholders during loading, giving users a sense of structure and progress.

  • When to use: Suitable for loading dashboards, tables, or other content-heavy areas.

  • Examples: Populating a data table or rendering a dashboard.

Progress circle (circular progress indicator)

Purple progress circle.

A progress circle uses a circular graphic that fills in proportionally to represent the completion of a task.

  • When to use: Effective for tasks where users need a sense of progression in a compact space. Works for both determinate (e.g., percentage-based tasks) and indeterminate processes.

  • Examples: File upload progress, syncing tasks.

Progress bar (linear progress indicator)

Purple progress bar.

A progress bar is a horizontal visual indicator that shows task progress from start to finish.

  • When to use: Best for determinate tasks where users expect a clear, linear representation of progress.

  • Examples: Data export, file processing.

Animated icon

Purple sand clock as a visualization of the animated icon progress indicator.

Animated icons use motion and creativity to convey ongoing activity, adding a touch of personality.

  • When to use: For branding purposes or to enhance user engagement in non-critical tasks.

  • Examples: Cloud syncing icon, playful loading animations.

Loading message

Loading message in a progress indicator.

Loading messages pair text with a visual indicator to provide additional clarity and reassurance.

  • When to use: When users need extra context about what is happening.

  • Examples: “Preparing your dashboard…” or “Saving changes…”

Percentage indicator

Percentage indicator.

A percentage indicator displays numeric progress, providing precise feedback on task completion.

  • When to use: For determinate tasks where exact progress information is crucial.

  • Examples: File upload completion (e.g., “75% complete”).

Hybrid progress indicator

Hybrid progress indicator with a progress circle, percentage, and icon.

Hybrid indicators combine multiple styles, such as a progress bar UI with a percentage label, to maximize clarity and effectiveness.

  • When to use: For complex or critical tasks where users benefit from multiple forms of feedback.

  • Examples: Upload processes with both visual and numeric progress.

How to use status indicator UI styling based on waiting time?

Different wait durations require different types of indicators to keep users informed and engaged. Here’s how to choose the right indicator for the job:

  1. Wait times under 1 second
    For quick actions, no loading indicator is needed. Adding one could create a glitchy experience, confusing the user. Let the task complete instantly without interruption.

  2. Short wait times (1–3 seconds)
    For brief waits, use indeterminate indicators like skeleton screens or spinners. These are effective without needing to overcomplicate the visual. Avoid complex animations as there’s not enough time for them to be meaningful.

  3. Medium wait times (3–10 seconds)
    If the wait is slightly longer, users may start to question responsiveness. Use determinate indicators like progress bars or percentage counters to show active progress. This helps keep users informed and engaged.

  4. Long wait times (10+ seconds)
    For extended waits, provide clear progress, allow interaction, and minimize anxiety. Combine elements like shimmer effects, background tasks, and engaging content (e.g., tips or storytelling) to keep users entertained and reduce frustration.

Visual guide on when to use progress indicators based on task duration.

What are the loading indicator best practices?

Use clear labels

Pair progress indicators with text (e.g., “Loading report data…”) to set expectations. For example, a file upload might say “Uploading 5 of 10 files” to clarify progress.

Show progress realistically

Ensure the progress matches the task duration—don’t let a progress bar jump to 90% quickly and stall. For instance, a task that takes 5 minutes should reflect gradual progress rather than jumping to 100% at the end.

Keep animations subtle

Use smooth animations that don’t distract from the task. A simple, continuous progress bar or circular spinner is often more effective than complex, flashy effects.

Design for accessibility

Ensure your progress indicators are accessible. Support screen readers and high-contrast modes, and add text like “50% complete” for clarity, especially for users who rely on assistive technologies.

Adapt to brand identity

Match the indicator design with your app's style. For example, a minimalistic app will use simple spinners, while a playful app might use animated icons like a dancing character.

Handle long waits gracefully

For lengthy tasks, provide time estimates such as “Approximately 2 minutes left” or break tasks into steps, like “Step 2 of 5: Processing” to keep users informed.

Avoid multiple progress indicators

Instead of showing separate spinners for each card or item, use a single global progress indicator, which allows users to understand the overall progress without feeling overwhelmed.

Use skeleton loaders

Skeleton screens display placeholders while content loads. This helps users understand what’s coming next and reduces cognitive load.

Don’t prolong loading times with animation

Avoid unnecessary animations that don’t provide meaningful feedback. For example, instead of an animated character, use progress bar design to clearly indicate loading progress.

Display content incrementally

Use progressive loading to show essential content first. For example, show text and images immediately, and load heavier elements like videos or large files in the background.

Strategic indicator placement

Place indicators where users expect them. For example, position a progress indicator at the top of the screen when using “swipe to refresh” or at the bottom when scrolling to show new content loading.

Allow uninterrupted usage

Don’t block users with full-screen indicators during long tasks. For example, show an upload progress in a small corner of the screen while allowing users to continue interacting with other parts of the app.

Communicate time estimates

Provide clear time estimates or countdowns, like “15 seconds remaining” to help manage user expectations. During file uploads or software installations, this clarity reduces frustration.

Ensure system responsiveness

Keep users informed during long tasks by showing continuous visual cues like spinning icons or progress bars. 

Integrate with other UI components

Integrate progress indicators with buttons or actions. For example, a file upload button might change to show progress, ensuring users understand the action they initiated is in progress.

Provide meaningful feedback

Help users understand what’s happening behind the scenes. For example, pacing the data import and explaining what’s being checked builds trust and keeps users informed.

How to choose animation for progress tracker UI? 

  • Consider task duration: Use quick animations for short tasks and smoother transitions for longer ones.

  • Maintain consistency: Use uniform animations across similar tasks.

  • Avoid distracting effects: Focus on functional animations that enhance understanding.

  • Ensure performance: Optimize animations to avoid slowing down the app.

What types of progress display should be avoided and why?

  • Frozen indicators: Mislead users into thinking the app is unresponsive.

  • Overly complex animations: Distract from the task at hand.

  • No feedback: Leaves users uncertain if the process is working.

  • Inconsistent styles: Confuses users and disrupts brand identity.

❓Questions designers should ask themselves

By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.

  • Is a progress indicator necessary here?

  • Should I use a determinate or indeterminate indicator?

  • Does the animation align with the task duration?

  • Have I provided enough context to users?

  • Is the indicator accessible to all users?

⚠️ Common mistakes to avoid

Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.

  • Using indeterminate indicators for predictable tasks.

  • Failing to provide explanatory text or labels.

  • Overusing progress indicators, leading to visual clutter.

  • Neglecting performance optimizations for animations.

🤝 Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

📚 Keep exploring 

Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers.

start your project with us.

Getting in touch
is easy .
Thank you for your message. It has been sent