ProgressBar

Solidtype_heroui.Progress_bar is Kobalte’s Progress.Root, a <div role="progressbar">, with the classes HeroUI’s own progressBarVariants gives. Its label names it, its output shows its value as Kobalte formats it for the reader’s locale, a percentage, and its fill is as wide in its track as its value is far along its range, or, indeterminate, moves along the track as HeroUI’s styles animate it.

Usage

Loading60%

progress_bar_usage.mlx

module Label = Solidtype_heroui.Label
module Progress_bar = Solidtype_heroui.Progress_bar

let make () =
  <Progress_bar class_="w-64" value=60.>
    <Label>"Loading"</Label>
    <Progress_bar.Output />
    <Progress_bar.Track><Progress_bar.Fill /></Progress_bar.Track>
  </Progress_bar>

Anatomy

<Progress_bar value=60.>
  <Label>"Loading"</Label>
  <Progress_bar.Output />
  <Progress_bar.Track><Progress_bar.Fill /></Progress_bar.Track>
</Progress_bar>

Examples

Sizes

Small40%

Medium60%

Large80%

progress_bar_sizes.mlx

module Label = Solidtype_heroui.Label
module Progress_bar = Solidtype_heroui.Progress_bar

let make () =
  <div class_="flex w-64 flex-col gap-6">
    <Progress_bar size=`sm value=40.>
      <Label>"Small"</Label>
      <Progress_bar.Output />
      <Progress_bar.Track><Progress_bar.Fill /></Progress_bar.Track>
    </Progress_bar>
    <Progress_bar size=`md value=60.>
      <Label>"Medium"</Label>
      <Progress_bar.Output />
      <Progress_bar.Track><Progress_bar.Fill /></Progress_bar.Track>
    </Progress_bar>
    <Progress_bar size=`lg value=80.>
      <Label>"Large"</Label>
      <Progress_bar.Output />
      <Progress_bar.Track><Progress_bar.Fill /></Progress_bar.Track>
    </Progress_bar>
  </div>

Colors

Default50%

Accent50%

Success50%

Warning50%

Danger50%

progress_bar_colors.mlx

module Label = Solidtype_heroui.Label
module Progress_bar = Solidtype_heroui.Progress_bar

let make () =
  <div class_="flex w-64 flex-col gap-6">
    <Progress_bar color=`default value=50.>
      <Label>"Default"</Label>
      <Progress_bar.Output />
      <Progress_bar.Track><Progress_bar.Fill /></Progress_bar.Track>
    </Progress_bar>
    <Progress_bar color=`accent value=50.>
      <Label>"Accent"</Label>
      <Progress_bar.Output />
      <Progress_bar.Track><Progress_bar.Fill /></Progress_bar.Track>
    </Progress_bar>
    <Progress_bar color=`success value=50.>
      <Label>"Success"</Label>
      <Progress_bar.Output />
      <Progress_bar.Track><Progress_bar.Fill /></Progress_bar.Track>
    </Progress_bar>
    <Progress_bar color=`warning value=50.>
      <Label>"Warning"</Label>
      <Progress_bar.Output />
      <Progress_bar.Track><Progress_bar.Fill /></Progress_bar.Track>
    </Progress_bar>
    <Progress_bar color=`danger value=50.>
      <Label>"Danger"</Label>
      <Progress_bar.Output />
      <Progress_bar.Track><Progress_bar.Fill /></Progress_bar.Track>
    </Progress_bar>
  </div>

Without Label

A bar no label names is named by its aria_label.

progress_bar_without_label.mlx

module Progress_bar = Solidtype_heroui.Progress_bar

let make () =
  <Progress_bar class_="w-64" aria_label="Loading progress" value=45.>
    <Progress_bar.Track><Progress_bar.Fill /></Progress_bar.Track>
  </Progress_bar>

Indeterminate

is_indeterminate where progress cannot be known: the bar has no value for a reader and its fill moves along the track.

Loading...

progress_bar_indeterminate.mlx

module Label = Solidtype_heroui.Label
module Progress_bar = Solidtype_heroui.Progress_bar

let make () =
  <Progress_bar class_="w-64" is_indeterminate=true>
    <Label>"Loading..."</Label>
    <Progress_bar.Track><Progress_bar.Fill /></Progress_bar.Track>
  </Progress_bar>

Custom Value Scale

Progress75%

progress_bar_custom_scale.mlx

module Label = Solidtype_heroui.Label
module Progress_bar = Solidtype_heroui.Progress_bar

let make () =
  <Progress_bar class_="w-64" max_value=1000. min_value=0. value=750.>
    <Label>"Progress"</Label>
    <Progress_bar.Output />
    <Progress_bar.Track><Progress_bar.Fill /></Progress_bar.Track>
  </Progress_bar>

Format Options

format_options formats the output and what a reader is told, by Kobalte’s number formatter in the reader’s locale: a percent, the default, is the value’s share of its range, and any other style the value itself.

Distance750 mi

progress_bar_format.mlx

module Label = Solidtype_heroui.Label
module Progress_bar = Solidtype_heroui.Progress_bar
module Format = Solidtype_kobalte.Types.NumberFormatOptions

let make () =
  <Progress_bar
    class_="w-64"
    max_value=1000.
    value=750.
    format_options=(fun () -> Format.make ~style:`unit ~unit:"mile" ())>
    <Label>"Distance"</Label>
    <Progress_bar.Output />
    <Progress_bar.Track><Progress_bar.Fill /></Progress_bar.Track>
  </Progress_bar>

Styling Reference

CSS Classes

• .progress-bar, and its colors .progress-bar--default, .progress-bar--accent, .progress-bar--success, .progress-bar--warning, .progress-bar--danger, and sizes .progress-bar--sm, .progress-bar--md, .progress-bar--lg
• .progress-bar__output, .progress-bar__track, .progress-bar__fill

API Reference

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

ProgressBar

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 fill’s color
size	size	[ `sm | `md | `lg ]	`md	Its track’s size
aria-label	aria_label	string		Its name where no label names it
className	class_	string		Added after HeroUI’s classes
valueLabel	—			The output’s children instead
formatOptions	format_options	Solidtype_kobalte.Types.NumberFormatOptions.t	a percent	How its value is shown

ProgressBar.Output, ProgressBar.Track, ProgressBar.Fill

Each takes class_, added after HeroUI’s class; the output children, in place of its value.

Beside React

Original HeroUI documentation: ProgressBar.

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

solidtype — OCaml, on Solid and Kobalte

Loading60%

React — TypeScript, on React Aria

attribute	solidtype	React