machines-ui
graphs

Meter

Horizontal progress bar that spans the frame: [ = = = - - - ] 42%.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphMeter } from '@fractaldesign/machines-ui';

Preview

[ SHIPPED ]

67%

characters, not a progress bar

67 percent characters, not a progress bar
<GraphMeter title="SHIPPED" value={0.67} caption="characters, not a progress bar" />

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
value* number —Fraction filled, from 0 to 1.
ticks number 14Number of ticks the bar is divided into.
caption string —Optional muted caption shown under the bar.
glyphs Glyphs —Characters that draw the graph: a preset name (`shade`, `ascii`, `hash`, `bar`) or your own array, lightest to heaviest.
palette GraphPalette
'mono''duo''multi'
—How many accent colours the graph uses: `mono` one, `duo` two, `multi` three.
corner string —Character drawn at each corner of the frame.
class string ''

API

  • class forwarded to the outer element
  • motion reveals on scroll into view

Theming

CSS custom properties this component reads.

  • --border
  • --graph-accent
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphMeter.svelte

machines-ui