Shipfaster: UI Components
Back
Title
Stat
Tooltip
Table
Tab
Sticky Alert
Pagination
Progress step
Sidebar Navigation
Progress Bar
Loader
Modal
List Field
Input Field
Inline Alert
Date Picker
Form control
File upload
Button
Button Group
Breadcrumbs
Badge
Avatar
Accordion
Outline Wireframe: UI Components
/
Loader

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.

Figma
All Products

Outline: Figma’s Ultimate Wireframe Kit

Stay on top of testing ideas and prototypes with a wireframe kit that simplifies your process

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