Circular Progress

A progress indicator that can be used to represent the progress or loading state of a task.

Overview

The CircularProgress component can be used as a spinner to represent a loading state.

Example: Circular progress

  import { CircularProgress, Size } from '@skiff-org/skiff-ui';

  <CircularProgress spinner size={Size.SMALL} />
  <CircularProgress spinner />
  <CircularProgress spinner size={Size.MEDIUM} />
  <CircularProgress spinner size={Size.X_MEDIUM} />
  <CircularProgress spinner size={Size.LARGE} />
  <CircularProgress spinner size={Size.X_LARGE} />

Determinate value

A fixed progress value can be provided to the progress component for tracking percent completion.

Example: Determinate value

  import { CircularProgress, Size } from '@skiff-org/skiff-ui';

    <CircularProgress size={Size.SMALL} progress={20} />
    <CircularProgress progress={20} />
    <CircularProgress size={Size.MEDIUM} progress={20} />
    <CircularProgress size={Size.X_MEDIUM} progress={20} />
    <CircularProgress size={Size.LARGE} progress={20} />
    <CircularProgress size={Size.X_LARGE} progress={20} />

Customization

The underlying progress track and progress value colors can be given custom values.

Example: Custom styles

  import { Banner, Size } from '@skiff-org/skiff-ui';

  <CircularProgress progress={20} progressColor='blue' size={Size.LARGE} />
  <CircularProgress
    progress={20}
    trackColor='var(--accent-red-secondary)'
    progressColor='red'
    size={Size.LARGE}
  />
  <CircularProgress
    progress={20}
    trackColor='var(--bg-overlay-secondary)'
    progressColor='green'
    size={Size.LARGE}
  />

Properties

Name
forceTheme
Type
ThemeMode
Description
Force the theme (dark or light mode) of the progress indicator, regardless of app theme.
Name
progress
Type
number
Description
Fixed percent (out of 100) to indicate progress track completion.
Name
size
Type
CustomCircularProgressSize
Description
Size of the progress indicator component.
Name
spinner
Type
boolean
Description
Spin the progress track indefinitely for loading.
Name
trackColor
Type
Color | string
Description
Custom set the of the underlying circular track.
Name
progressColor
Type
Color | string
Description
Set the color of the progress completion track.

Types

  type CustomCircularProgressSize = Size.SMALL | Size.MEDIUM | Size.X_MEDIUM | Size.LARGE | Size.X_LARGE;