Progress Circle

import {ProgressCircle} from "@qui/react-vscode"

Examples

Showcase

Theme:

Dark Modern

import type {ReactElement} from "react"

import {ProgressCircle} from "@qui/react-vscode"

export default function Showcase(): ReactElement {
  return (
    <ProgressCircle.Root>
      <ProgressCircle.Circle />
    </ProgressCircle.Root>
  )
}

Label

Theme:

Dark Modern

50%

import type {ReactElement} from "react"

import {ProgressCircle} from "@qui/react-vscode"

export default function Label(): ReactElement {
  return (
    <ProgressCircle.Root defaultValue={50} size="lg">
      {({valuePercent}) => (
        <>
          <ProgressCircle.Label>{valuePercent}</ProgressCircle.Label>
          <ProgressCircle.Circle />
        </>
      )}
    </ProgressCircle.Root>
  )
}

API

ProgressCircleRootProps

Name & Description	Option(s)	Default
children ^* React children prop.	\| ReactNode \| (( props: any, ) => ReactNode)
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
defaultValue The initial value of the progress when it is first rendered. Use when you do not need to control the state of the progress.	number
max The maximum allowed value of the progress bar.	number
min The minimum allowed value of the progress bar.	number
onValueChange Callback fired when the value changes.	( value: number \| object, ) => void
size The width and height of the progress circle. Supply as a number for fine-grained customization.	\| 'sm' \| 'md' \| 'lg' \| number	'md'
value The current value of the progress bar.	number

children

Type

| ReactNode
| ((
    props: any,
  ) => ReactNode)

Description

React children prop.

Type

| ElementType
| ComponentType

Default

'div'

Description

The component used for the root node. It can be a React component or element.

defaultValue

Type

number

Description

The initial value of the progress when it is first rendered. Use when you do not need to control the state of the progress.

max

Type

number

Description

The maximum allowed value of the progress bar.

min

Type

number

Description

The minimum allowed value of the progress bar.

onValueChange

Type

(
  value: number | object,
) => void

Description

Callback fired when the value changes.

size

Type

| 'sm'
| 'md'
| 'lg'
| number

Default

'md'

Description

The width and height of the progress circle. Supply as a number for fine-grained customization.

value

Type

number

Description

The current value of the progress bar.

Progress

Status