Components
Progress
SketchProgress — a hand-drawn progress bar with an optional percentage label.
SketchProgress renders a rough.js filled bar inside a sketched outline. It's
fluid by default — it fills its container — so wrap it to control the width.
Default
import { SketchProgress } from "blackchalk";<div style={{ width: 420, maxWidth: "100%" }}><SketchProgress value={60} /></div>With percentage label
import { SketchProgress } from "blackchalk";<div style={{ width: 420, maxWidth: "100%" }}><SketchProgress value={42} percentage /></div>Props
| Prop | Type | Default |
|---|---|---|
value | number | 0 |
min | number | 0 |
max | number | 100 |
percentage | boolean | — |
width | number | string | "100%" |
height | number | 32 |
className | string | — |
style | CSSProperties | — |
See it in the Storybook playground, or read the source.