ProgressCircle

Solidtype_heroui.Progress_circle is Kobalte’s Progress.Root, a <div role="progressbar">, with the classes HeroUI’s own progressCircleVariants gives. Its fill is an arc round its track, from the top, as far as its value is along its range, or, indeterminate, a quarter of the circle that spins as HeroUI’s styles animate it. No label names it, so it is named by its aria_label, and a reader is told its value as Kobalte formats it, a percentage.

Usage

progress_circle_usage.mlx

module Progress_circle = Solidtype_heroui.Progress_circle

let make () =
  <Progress_circle aria_label="Loading" value=60.>
    <Progress_circle.Track>
      <Progress_circle.Track_circle /> <Progress_circle.Fill_circle />
    </Progress_circle.Track>
  </Progress_circle>

Anatomy

<Progress_circle value=60. aria_label="Loading">
  <Progress_circle.Track>
    <Progress_circle.Track_circle />
    <Progress_circle.Fill_circle />
  </Progress_circle.Track>
</Progress_circle>

Examples

Sizes

progress_circle_sizes.mlx

module Progress_circle = Solidtype_heroui.Progress_circle

let make () =
  <div class_="flex items-center gap-4">
    <Progress_circle aria_label="Loading" size=`sm value=60.>
      <Progress_circle.Track>
        <Progress_circle.Track_circle /> <Progress_circle.Fill_circle />
      </Progress_circle.Track>
    </Progress_circle>
    <Progress_circle aria_label="Loading" size=`md value=60.>
      <Progress_circle.Track>
        <Progress_circle.Track_circle /> <Progress_circle.Fill_circle />
      </Progress_circle.Track>
    </Progress_circle>
    <Progress_circle aria_label="Loading" size=`lg value=60.>
      <Progress_circle.Track>
        <Progress_circle.Track_circle /> <Progress_circle.Fill_circle />
      </Progress_circle.Track>
    </Progress_circle>
  </div>

Colors

progress_circle_colors.mlx

module Progress_circle = Solidtype_heroui.Progress_circle

let make () =
  <div class_="flex items-center gap-4">
    <Progress_circle aria_label="Loading" color=`default value=70.>
      <Progress_circle.Track>
        <Progress_circle.Track_circle /> <Progress_circle.Fill_circle />
      </Progress_circle.Track>
    </Progress_circle>
    <Progress_circle aria_label="Loading" color=`accent value=70.>
      <Progress_circle.Track>
        <Progress_circle.Track_circle /> <Progress_circle.Fill_circle />
      </Progress_circle.Track>
    </Progress_circle>
    <Progress_circle aria_label="Loading" color=`success value=70.>
      <Progress_circle.Track>
        <Progress_circle.Track_circle /> <Progress_circle.Fill_circle />
      </Progress_circle.Track>
    </Progress_circle>
    <Progress_circle aria_label="Loading" color=`warning value=70.>
      <Progress_circle.Track>
        <Progress_circle.Track_circle /> <Progress_circle.Fill_circle />
      </Progress_circle.Track>
    </Progress_circle>
    <Progress_circle aria_label="Loading" color=`danger value=70.>
      <Progress_circle.Track>
        <Progress_circle.Track_circle /> <Progress_circle.Fill_circle />
      </Progress_circle.Track>
    </Progress_circle>
  </div>

Indeterminate

progress_circle_indeterminate.mlx

module Progress_circle = Solidtype_heroui.Progress_circle

let make () =
  <Progress_circle aria_label="Loading" is_indeterminate=true>
    <Progress_circle.Track>
      <Progress_circle.Track_circle /> <Progress_circle.Fill_circle />
    </Progress_circle.Track>
  </Progress_circle>

With Label

75% Complete

progress_circle_label.mlx

module Label = Solidtype_heroui.Label
module Progress_circle = Solidtype_heroui.Progress_circle

let make () =
  <div class_="flex items-center gap-3">
    <Progress_circle aria_label="Loading" value=75.>
      <Progress_circle.Track>
        <Progress_circle.Track_circle /> <Progress_circle.Fill_circle />
      </Progress_circle.Track>
    </Progress_circle>
    <Label>"75% Complete"</Label>
  </div>

Custom SVG Props

A circle’s r, cx, cy and stroke_width, and the track’s view_box and stroke_width, change the drawing. The fill’s arc is measured on its own radius, so a circle of any size shows its value: HeroUI’s measures it on the default radius whatever r it is given.

progress_circle_custom_svg.mlx

module Progress_circle = Solidtype_heroui.Progress_circle

let make () =
  <div class_="flex items-end gap-6">
    <Progress_circle aria_label="Thin circle" value=60.>
      <Progress_circle.Track stroke_width=2. view_box="0 0 36 36">
        <Progress_circle.Track_circle cx=18. cy=18. r=17. stroke_width=2. />
        <Progress_circle.Fill_circle cx=18. cy=18. r=17. stroke_width=2. />
      </Progress_circle.Track>
    </Progress_circle>
    <Progress_circle aria_label="Default circle" value=60.>
      <Progress_circle.Track>
        <Progress_circle.Track_circle /> <Progress_circle.Fill_circle />
      </Progress_circle.Track>
    </Progress_circle>
    <Progress_circle aria_label="Thick circle" value=60.>
      <Progress_circle.Track stroke_width=6. view_box="0 0 36 36">
        <Progress_circle.Track_circle cx=18. cy=18. r=15. stroke_width=6. />
        <Progress_circle.Fill_circle cx=18. cy=18. r=15. stroke_width=6. />
      </Progress_circle.Track>
    </Progress_circle>
  </div>

Styling Reference

CSS Classes

• .progress-circle, and its colors .progress-circle--default, .progress-circle--accent, .progress-circle--success, .progress-circle--warning, .progress-circle--danger, and sizes .progress-circle--sm, .progress-circle--md, .progress-circle--lg
• .progress-circle__track, .progress-circle__track-circle, .progress-circle__fill-circle

API Reference

Each prop beside the name HeroUI’s React component gives it.

ProgressCircle

React	solidtype	Type	Default	Description
value	value	float	0.	Its value
minValue	min_value	float	0.	The least value
maxValue	max_value	float	100.	The greatest value
isIndeterminate	is_indeterminate	bool	false	Whether its progress cannot be known
color	color	[ `default | `accent | `success | `warning | `danger ]	`accent	Its arc’s color
size	size	[ `sm | `md | `lg ]	`md	Its size
formatOptions	format_options	Solidtype_kobalte.Types.NumberFormatOptions.t	a percent	How its value is told to a reader
aria-label	aria_label	string		Its name
className	class_	string		Added after HeroUI’s classes

ProgressCircle.Track

React	solidtype	Type	Default	Description
viewBox	view_box	string	"0 0 36 36"	The drawing’s box
strokeWidth	stroke_width	float		Its circles’ stroke, where they set none
className	class_	string		Added after HeroUI’s class

ProgressCircle.TrackCircle, ProgressCircle.FillCircle

React	solidtype	Type	Default	Description
cx, cy	cx, cy	float	18.	Its center
r	r	float	16.	Its radius
strokeWidth	stroke_width	float	4.	Its stroke
className	class_	string		Added after HeroUI’s class

Beside React

Original HeroUI documentation: ProgressCircle.

The same HeroUI ProgressCircle twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two circles: a marked row is one they disagree on.

solidtype — OCaml, on Solid and Kobalte

React — TypeScript, on React Aria

attribute	solidtype	React