Progress indicator

In an ongoing process the user will see the feedback in form of a progress indicator component. For example loading content, submitting forms or saving updates.

  • We use native Android and iOS progress indicator components in combination with PARKSIDE brand colors.
  • There are two types of progress indicators to support both determinate and indeterminate processes:
    • Determinate
      The invisible track is filled with color and the indicator moves from 0 to 360 degrees.
    • Indeterminate
      The indicator grows and shrinks in size while moving along the invisible track.

Linear progress indicator#

Anatomy#

Linear progress indicator anatomy

  1. Track
  2. Indicator

☀ Light mode styling for Android and iOS#

AttributesPreview
track color: greyscale/light-mode/general/extra-low-contrast
indicator color: brand-primary/base		Linear progress indicator

☾ Dark mode styling for Android and iOS#

AttributesPreview
track color: greyscale/dark-mode/general/extra-low-contrast
indicator color: brand-primary/base		Linear progress indicator

Circular progress indicator#

Anatomy#

circular progress indicator anatomy

  1. Track
  2. Indicator

☀ Light mode styling for Android#

AttributesPreview
track color: greyscale/light-mode/general/extra-low-contrast
indicator color: brand-primary/base		circular progress indicator

☾ Dark mode styling for Android#

AttributesPreview
track color: greyscale/dark-mode/general/extra-low-contrast
indicator color: brand-primary/base		circular progress indicator

☀ Light mode styling for iOS#

AttributesPreview
angular color: greyscale/light-mode/general/low-contrast
opacity: 64%
greyscale/light-mode/general/extra-low-contrast
opacity: 8%		circular progress indicator

☾ Dark mode styling for iOS#

AttributesPreview
angular color: greyscale/dark-mode/general/low-contrast
opacity: 64%
greyscale/dark-mode/general/extra-low-contrast
opacity: 8%		circular progress indicator

Spacing & measurements#

TypeAttributesPreview
Android determinate / indeterminate circular indicatorsize: 48x48pxCircular progress indicator
iOS indeterminate circular indicatorsize: 32x32pxCircular progress indicator
Android / iOS determinate linear indicatorheight: 4px
length: depends on progress		Linear progress indicator
Android indeterminate linear indicators
height: 4px
indicator length: 112px		Linear progress indicator

What can be modified?#

  • Scale the circle indicator.
  • Adjust the width for the linear indicator.

2.2.0 Parkside - 2021-12-07#

Added#

  • Figma, Doc: "Progress indicator" | Progress indicator component is available