Version: 3.0.0-next.37

Progress

Progress is used to display the progress status for a task that takes a long time or consists of several steps.

Import#

import { Progress } from 'native-base';

Examples#

Basic#

Progress colorScheme#

Sizes#

Flat Progress#

Custom Track Color#

Props#

Name Type Description Default
value number Value of Progress. 0
size string Defines height of Progress sm
colorScheme string The color scheme of the progress. This should be one of the color keys in the theme (e.g."green", "red"). primary
isIndeterminate any Whether progress is indeterminate false
min number Min progress value 0
max number Max progress value 100

Progress implements Box

Accessibility#

  • On web and mobile, Progress has role set to progressbar to denote that it is a progress bar.
  • On web, aria-valuenow, aria-valuemin and aria-valuemax to ensure the progress percent is visible to screen readers.
  • On mobile, accessibilityValue is used to ensure it's announced by Talkback and VoiceOver.