Components

Loaders

A loader visualizes the current status of a loading process. This guide explains how to use them.

Loaders
  • Usage
  • Examples
  • Related component
  • Download

Usage

Loaders can be implemented in different sizes, shapes, and colors – and they can be indeterminate or determinate.

Indeterminate

Use indeterminate loaders in cases where it is not possible to calculate the loading time. You can also use it in cases where it cannot be defined because of too many dependencies, such as lazy loading a gallery with images.

Determinate

Use determinate loaders when the loading time can be calculated and defined. A drop zone with a file uploader in which the precise size of the file is known is an example. A circular loader can also be used with a percentage in the center of the loader element itself.

Examples

Related component

Download

Sketch UI Library
ZIP
85.97 MB