Progress

Visual indicators of task completion. Progress renders a horizontal bar; ProgressCircular renders an SVG ring. Both animate smoothly and include a glowing sweep effect.

Value: 60

Linear Usage

import { Progress } from "@bloomkit/react";
 
<Progress value={75} />

Circular Usage

import { ProgressCircular } from "@bloomkit/react";
 
<ProgressCircular value={75} />
<ProgressCircular value={40} size={64} strokeWidth={6} />

Progress Props

Prop	Type	Default	Description
value	number	0	Current progress value between 0 and 100
className	string	""	Additional Tailwind classes applied to the track element

ProgressCircular Props

Prop	Type	Default	Description
value	number	0	Current progress value between 0 and 100
size	number	48	Diameter of the SVG circle in pixels
strokeWidth	number	4	Width of the progress ring stroke in pixels
className	string	""	Additional Tailwind classes applied to the wrapper element