Skip to main content
Table of Contents

Progress

A Progress loader communicates progress when downloading or uploading content.

Table of Contents
Used for this
  • To communicate the amount of time left when downloading or uploading content
Not for this
  • When the loading time is unknown, use a Spinner instead
  • When loading page content, use a Skeleton loader instead

How to use it

Default

A Progress loader represents the percent complete from 0 to 100.

Color

The default foreground color of the Progress loader bar is the success color. It can be changed.

Size

A Progress loader is medium by default. It can also be small or large.

Configuration

  • Name9.0.0-next.26•View source•View on npm
  • Installnpm install @zendeskgarden/react-loaders
  • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
  • Importimport { Progress } from '@zendeskgarden/react-loaders'

API

Progress

Extends HTMLAttributes<HTMLDivElement>

Prop nameTypeDefaultDescription
color
string
Sets the foreground bar's fill color. Defaults to the successHue theme value.
size
'small' | 'medium' | 'large'
'medium'
Adjusts the height
value
number
0
Sets the progress as a value between 0 and 100