Progress bar for any "how full is X" metric -- token supply against a cap, graduation reserves toward a threshold, vault deposits toward an issuance limit.
-- Bare usage:
Web3.Ui.SupplyBar.view
{ current = curve.supply
, max = maxSupply
, label = Just "supply"
}
-- With a milestone marker (e.g., the bonding-curve graduation threshold
-- sitting partway along a max-reserve bar):
Web3.Ui.SupplyBar.withMilestone
{ current = curve.curvePls
, max = totalCapacity
, milestone = Just { at = graduationThreshold, label = "graduation" }
, label = Just "reserves"
}The bar is rendered as a styled div with CSS classes web3-supplybar,
web3-supplybar__fill, web3-supplybar__milestone, web3-supplybar__label.
Width is controlled by width: <pct>% inline; everything else is style-via-CSS.
Render a progress bar, optionally annotated with a milestone marker
positioned at milestone.at along the [0, max] range.
Minimal config for a plain progress bar.
Render a progress bar without a milestone marker.