SemiCircleProgress

SemiCircleProgress displays progress with a semi-circular diagram, useful for dashboards and status indicators.

Import

import { SemiCircleProgress } from '@tidbcloud/uikit'

Basic Usage

import { SemiCircleProgress } from '@tidbcloud/uikit'
 
function Demo() {
  return <SemiCircleProgress value={40} label="40%" />
}

Size and Thickness

import { SemiCircleProgress } from '@tidbcloud/uikit'
 
function Demo() {
  return <SemiCircleProgress value={60} size={200} thickness={12} label="60%" />
}

Custom Colors

import { SemiCircleProgress } from '@tidbcloud/uikit'
 
function Demo() {
  return <SemiCircleProgress value={30} filledSegmentColor="blue" emptySegmentColor="var(--mantine-color-dimmed)" />
}

Label Position

By default, label is at the bottom. Use labelPosition="center" to center it:

import { SemiCircleProgress } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <>
      <SemiCircleProgress value={30} label="Bottom" mb="xl" />
      <SemiCircleProgress value={30} label="Center" labelPosition="center" />
    </>
  )
}

Fill Direction

Control which direction the progress fills from:

import { SemiCircleProgress } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <>
      <SemiCircleProgress value={50} fillDirection="left-to-right" label="Left to Right" />
      <SemiCircleProgress value={50} fillDirection="right-to-left" label="Right to Left" />
    </>
  )
}

Orientation

import { SemiCircleProgress } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <>
      <SemiCircleProgress value={50} orientation="up" label="Up" />
      <SemiCircleProgress value={50} orientation="down" label="Down" />
    </>
  )
}

Animated Transitions

import { useState } from 'react'
import { Button, SemiCircleProgress } from '@tidbcloud/uikit'
 
function Demo() {
  const [value, setValue] = useState(30)
 
  return (
    <>
      <SemiCircleProgress value={value} transitionDuration={250} label={`${value}%`} />
      <Button onClick={() => setValue(Math.floor(Math.random() * 100))} mt="xl">
        Set random value
      </Button>
    </>
  )
}

Key Props

Prop	Type	Default	Description
`value`	`number`	required	Progress value from 0 to 100
`size`	`number`	`200`	Diameter of the SVG in px
`thickness`	`number`	`12`	Circle thickness in px
`label`	`ReactNode`	-	Label rendered inside the circle
`labelPosition`	`'center' \| 'bottom'`	`'bottom'`	Label position relative to circle center
`filledSegmentColor`	`MantineColor`	-	Color of the filled segment
`emptySegmentColor`	`MantineColor`	-	Color of the empty segment
`fillDirection`	`'left-to-right' \| 'right-to-left'`	`'left-to-right'`	Direction the circle fills from
`orientation`	`'up' \| 'down'`	`'up'`	Orientation of the circle
`transitionDuration`	`number`	`0`	Transition duration in ms for animated changes

Select Simplegrid