Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Progress Circle

A progress circle component is a visual element that displays the progress of a task or process as a circular indicator.

banner-Progress Circle

Anatomy

The Progress Circle component is a visual representation of the completion status of a task or process in the form of a circular progress indicator. It provides users with a dynamic and intuitive way to track progress.

anatomy navbar

  1. Circular Track: The background circle that represents the entire process.

  2. Progress Arc: The filled portion of the circle that grows as the task progresses, forming an arc.

  3. Percentage Indicator (Optional): A numerical representation of the completion percentage displayed within or near the progress circle.

  4. Label (Optional): A brief label or description of the task being tracked.

Usage

The Time Picker component can be used in various contexts, such as:

  • File Uploads: Show the progress of file uploads, download, or data transfer.

  • Loading Indicators: Indicate the loading progress of web pages, features, or content.

  • Multi-step Processes: Display the completion status of multi-step workflows, wizards, or onboarding.

  • Survey or Quiz Progress: Communicate the progress of surveys, questionnaires, or quizzes.

Common places buttons appear : Mobile app homepage , website homepage and other pages when needed etc.

When to use

  • Visual Engagement is Preferred: A dynamic and visually appealing progress indicator enhances user engagement.
  • Circular Progress is Intuitive: The task's nature lends itself well to a circular representation (e.g., loading a circular object).
  • Real-time Feedback is Essential: You need to provide immediate feedback on the progress of a task or process.
  • Improved User Experience is Required: It helps reduce user uncertainty and frustration, especially during longer tasks.

When not to use

  • Space Constraints: Limited screen space may not accommodate a circular progress indicator, making it impractical.
  • Irrelevant to User Experience: When progress tracking doesn't significantly impact the user's interaction or understanding of the task.
  • Incompatibility with Task Type: For tasks that do not naturally align with circular representation (e.g., linear processes).

Accessibility

To ensure accessibility, follow these guidelines:

  • Provide alternative text for screen readers to describe the progress.

  • Ensure keyboard navigation is supported, allowing users to interact with the progress circle using keyboard controls.

  • Maintain sufficient color contrast between the progress arc and background for users with visual impairments.

  • Test with screen readers and assistive technologies to verify accessibility.

Alt text

Do

Use clear and descriptive labels if including a label or percentage indicator.

Alt text

Don't

Didn’t provide an indicator progress for the progress bar

Content

When creating Progress Circle :

  • Label: If including a label, keep it brief and informative.

  • Percentage Indicator: If displaying a percentage, use clear formatting and ensure it updates in real-time.

  • Alternative Text: For accessibility, provide alternative text that communicates the progress status.

  • Color Coding: If using color to distinguish between completed and remaining progress, select accessible colors.

Alt text

Do

Use color to distinguish between completed and remaining progress, choose colors that are meaningful and intuitive.

Alt text

Don't

Didn’t use the correct color to distinguish between completed and remaining progress, choose colors that are meaningful and intuitive.