Version: 3.0.6

CircularProgress

Circular Progress is used to indicate the progress for determinate and indeterminate processes.

Import#

import { CircularProgress } from 'native-base';

Examples#

Usage#

CircularProgress Sizes#

You can add a size prop to the CircularProgress to add a custom size or choose from defined sizes.

CircularProgress Thickness#

You can add the thickness prop to update the thickness of the progress ring.

CircularProgress Color#

You can add the color prop to apply any color that the theme contains.

CircularProgress TrackColor#

You can add the trackColor prop to apply any color that the theme contains to the CircularProgress track.

CircularProgress Min and Max#

You can add min and max props to manage what is the start and end value of your CircularProgress.

CircularProgress Label#

Indeterminate Progress#

Setting the progress to indeterminate means that the value can't be determined upfront. Pass the isIndeterminate prop to activate this state.

Props#

NameTypeDescriptionDefault
size4xl,3xl,2xl, xl,lg, md, sm, xs, numberThe size of circular progress.lg
maxnumberMaximum value defining 100% progress made (must be higher than 'min')-
minnumberMinimum value defining 'no progress' (must be lower than 'max')-
valuenumberCurrent progress (must be between min/max)-
isIndeterminatebooleanPuts the component into indeterminate state. When passed, the 'value' prop is ignored-
thicknessnumber, stringThe thickness of the progress indicator-
trackColorstringThe color name of the progress track. Use a color key from the theme object-
colorstringThe color of the progress indicator. Use a color key from the theme object-
_textTextPropsText styling for Label Text.-

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.