Progress bars

Horizontal percentage bar and a multi-step indicator with completed / current / upcoming states.

Preview

Migrating MySQL database...

React preview

LiveView (HEEx)

alias DesignSystem.UI.ProgressBars

<ProgressBars.progress_bar value={37} label="Migrating MySQL database..." />

<ProgressBars.steps steps={[
  %{label: "Job details",      href: ~p"/job", status: :complete},
  %{label: "Application form", href: ~p"/apply", status: :current},
  %{label: "Preview",          href: "#",         status: :upcoming}
]} />

React (JSX)

import { ProgressBar, Steps } from "../ui/index.mjs"

<ProgressBar value={37} label="Migrating MySQL database..." />

<Steps
  steps={[
    { label: "Job details",      href: "/job",   status: "complete" },
    { label: "Application form", href: "/apply", status: "current" },
    { label: "Preview",          href: "#",      status: "upcoming" },
  ]}
/>