class ProgressBar
extends Box
import { ProgressBar } from "https://deno.land/x/tui@2.1.11/src/components/mod.ts";
Component for creating interactive progressbars
Examples
Example 1
Example 1
new ProgressBar({
parent: tui,
orientation: "horizontal",
direction: "normal",
theme: {
base: crayon.bgLightBlue,
focused: crayon.bgCyan,
active: crayon.bgBlue,
progress: {
base: crayon.bgLightBlue.green,
focused: crayon.bgCyan.lightGreen,
active: crayon.bgBlue.lightYellow,
},
},
value: 50,
min: 0,
max: 100,
smooth: false,
rectangle: {
column: 48,
height: 2,
row: 3,
width: 10,
},
zIndex: 0,
});
You can make the progressbar vertical by changing orientation
Example 2
Example 2
new ProgressBar({
...,
orientation: "vertical",
});
You can reverse the flow of progress by changing direction
to "reversed"
Example 3
Example 3
new ProgressBar({
...,
direction: "reversed",
});
You can also make progress seem more granular by taking advantage of special characters.
Set smooth to true
to do that.
Example 4
Example 4
new ProgressBar({
...,
smooth: true,
});
Constructors
new
ProgressBar(options: ProgressBarOptions)Properties
charMap: Signal<ProgressBarCharMapType>
direction: Signal<ProgressBarDirection>
drawnObjects: { box: BoxObject; progress: BoxObject | TextObject[]; }
max: Signal<number>
min: Signal<number>
orientation: Signal<ProgressBarOrientation>
smooth: Signal<boolean>
theme: ProgressBarTheme
value: Signal<number>