saturation/uisaturation/ui
DocsComponentsBlocksPages
GitHub

Sections

IntroductionComponentsInstallationMCPTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBeamBlur FadeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandComparison SliderContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmoji PickerEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNavigation MenuNovel EditorPaginationParallaxProgressProgressive BlurRadio GroupRippleSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Circular Progress

Circular Progress

A circular progress indicator that shows completion percentage.

Loading...

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/circular-progress.json

Usage

import { CircularProgress } from "@/components/ui/circular-progress"
<CircularProgress value={75} showLabel />

API Reference

CircularProgress

PropTypeDefaultDescription
valuenumber—The progress value (0–100).
sizenumber100The diameter of the circle in pixels.
strokeWidthnumber—Sets both circle and progress stroke width.
circleStrokeWidthnumber10The stroke width of the background circle.
progressStrokeWidthnumber—The stroke width of the progress arc.
shape"square" | "round""round"The shape of the progress stroke cap.
showLabelbooleanfalseWhether to show the percentage label in the center.
renderLabel(progress: number) => React.ReactNode—Custom render function for the center label.
classNamestring—Additional CSS classes for the wrapper.
progressClassNamestring—Additional CSS classes for the progress arc.
labelClassNamestring—Additional CSS classes for the label.
PreviousCheckboxNextCode Block

On This Page

  • Installation
  • Usage
  • API Reference
  • CircularProgress
25
60
90