Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Latest commit

 

History

History
105 lines (70 loc) · 4.43 KB

circularprogress.mdx

File metadata and controls

105 lines (70 loc) · 4.43 KB

import SEO from "../components/SEO";

Circular Progress

The Circular Progress component is used to indicates the progress for both determinate and indeterminate processes.

  • Determinate progress fills the circular track with color, as the indicator moves from 0 to 360 degrees.
  • Indeterminate progress grow and shrink the indicator while moving along the circular track.

See CCircularProgress's accessibility report

Import

import { CCircularProgress, CCircularProgressLabel } from "@chakra-ui/vue";

Usage

<c-circular-progress :value="80" />

Changing the size

You can add size prop to the progressbar to add a custom size.

// Change the size to 120px
<c-circular-progress :value="30" size="120px" />

Changing the thickness

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

The thickness has to be a ratio of the size. Value should be between 0 and 1.

// 10% of size (100px) => 10px
<c-circular-progress :value="30" size="120px" :thickness="0.1" />

Changing the color

You can add color prop to any progressbar to apply any color that exists in the theme.

<c-circular-progress :value="30" color="orange" :thickness="0.1" />

Adding label

Chakra exports a CCircularProgressLabel to help you add label. Pass this component as children and you'll be able to render the value

<c-circular-progress :value="40" color="green">
  <c-circular-progress-label>40%</c-circular-progress-label>
</c-circular-progress>

Indeterminate Progress

Setting the progress to indeterminate means you're not able to determine the value upfront, so won't need to pass the value prop.

<c-circular-progress is-indeterminate/>

Accessibility

  • CCircularProgress has a role set to progressbar to denote that it's a progress bar
  • CCircularProgress has aria-valuenow set to the percentage completion value passed to the component, to ensure the progress percent is visible to screen readers.

Props

Name Type Default Description
size string 48px The size of the circular progress in CSS units
max number 100 Maximum value defining 100% progress made (must be higher than 'min')
min number 0 Minimum value defining 'no progress' (must be lower than 'max')
value number Current progress (must be between min/max)
isIndeterminate boolean Puts the component into 'indeterminate' state; Ignores 'value' prop
thickness number 0.2 The thickness of progress indicator as a ratio of size. Must be between 0 and 1
angle number 0 Angle to rotate progress indicator by
trackColor string gray The color name of the progress track. Use a color key in the theme object
color string blue The color of the progress indicator. Use a color key in the theme object

Slots

Name Description
default Used for the CCircularProgressLabel to display the current progress percentage