Shipfaster: UI Components

Loader

Used when retrieving data or performing slow computations, and help to notify users that loading is underway.

Overview

Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

They notify to the user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they reassure the user that their action is being processed. Use a loading spinner whenever the wait time is anticipated to be longer than three seconds.

When to use

  • To give visual feedback on user's action, when it's made.
  • To keep users in the loop and giving up on the journey.
  • To show progress on user action.

Anatomy

Anatomy of loader
  1. Spinner: Animates when it's loading.
  2. Description: Optional text, which adds feedback to the loading state and let user's know what's happening.

Best Practices

  1. Be shown to the user as least as possible.
  2. Give time estimation.
  3. Explain why the user needs to wait.
  4. Make the waiting process less frustrating.

Recommended resources

Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.

UI/UX
All Products

Shipfaster UI: Figma UI Kit & Design System

Access 8,000+ Customizable components to supercharge your design workflow.

Pricing Icon
$90
3,200+ of Downloads
Review Stars
3,200+ downloads
Learn More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.