progressBar

Progress bar node for communicating the program is actively working on something, and needs time to process. The progress bar draws a styleable ProgressBarFill node inside, spanning a fraction of its content, usually starting from left. Text is drawn over the node to display current progress.

The progress bar will use text height for its own height, but it needs extra horizontal space to be functional. To make sure it displays, ensure its horizontal alignment is always set to "fill" — this is the default, if the layout is not changed.

Styling

The progressBar component is split into two nodes, ProgressBar and ProgressBarFill. When styling, the former defines the background, greyed out part of the node, and the latter defines the foreground, the fill that appears as progress is accumulated. Usually, the background for ProgressBar will have low saturation or be grayed out, and ProgressBarFill will be colorful.

Text currently uses the ProgressBar color, but it's possible it will blend the colors of both sides in the future.

Theme(
    rule!ProgressBar(
        backgroundColor = color("#eee"),
        textColor = color("#000"),
    ),
    rule!ProgressBarFill(
        backgroundColor = color("#17b117"),
    )
)

Text format

ProgressBar does not currently offer the possibility to change text format, but it can be accomplished by subclassing and overriding the buildText method, like so:

class MyProgressBar : ProgressBar {

    override string buildText() const {

        return format!"%s/%s"(value, maxValue);

    }

}

Importantly, should buildText return an empty string, the progress bar will disappear, since its size depends on the text itself. If text is not desired, one can set textColor to a transparent value like color("#0000"). Alternatively resizeImpl can also be overrided to change the sizing behavior.