UI Elements

Show an activity spinner or a progress bar so users know something is loading and can gauge how long it will take to load.

When content is loading, show an activity spinner or a progress bar so users know something is loading and gauge how long it will take to load.


Activity spinners

When loading content, but you’re unsure how long it will take or you can’t measure the size of the download, use an activity spinner at the minimum.


Progress bars

Progress bars show a horizontal indicator displaying the percentage completed, and give a visual cue about how long a task is expected to take.


Progress circle

If there are multiple files or tasks processing simultaneously, a progress circle indicator may be more appropriate for lists or table layouts.

File 1
File 2
File 3

When tasks are complete, display a checkmark inside the circle.

Task 1
Task 2
Task 3

When file processing is complete, replace it with the file format icon.

File 1
File 2
File 3
  • Throbbers
  • Activity Indicators
    Loading indicators show progress of an action and provide feedback to users, helping them understand when an action is complete.
  • Loading Animations
    Loading animations provide visual feedback to users while content is loading, helping to create a better user experience.
  • Loading Overlays
    Loading overlays are a great way to let your users know that something is happening in the background.
  • Loading Placeholders
    Loading placeholders are indicators that show progress while content is being loaded, providing a better user experience.
  • Progress Bars
    Progress bars show the loading progress of a task, providing visual feedback to users and helping them understand how long they must wait.
  • Spinners
    Spinners are loading indicators used to show progress while data is being loaded.
Upload file