Version: 3.0.0-next.40


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


import { CircularProgress } from 'native-base';



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.


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.-


  • 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.