ProgressBar

A simple component that displays a progress bar with a given progress value or a loading bar.

Properties

Color, AppearanceOverride

Use the Color and AppearanceOverride properties to style the component.

Available colors are amber, blue, cyan, emerald, fuchsia, green, indigo, lime, neutral, orange, pink, purple, red, rose, sky, slate, stone, teal, violet, yellow, zinc.

The theme data for the component can be found in the Theming section and can be overwritten through AppearanceOverride.

Pass Color as a string and AppearanceOverride as an optionalColorTable. More information on overrides can be found here.

Tailwind Color

default

Code block has not loaded. An error may have occurred.

Height

Type

Code block has not loaded. An error may have occurred.

Progress

Type

Code block has not loaded. An error may have occurred.

Max

Type

Code block has not loaded. An error may have occurred.

Indicator

Type

Code block has not loaded. An error may have occurred.

Instance Properties

This instance takes all the properties of a Frame. SpecialKeys, such as fusion.Children will also be passed to the instance.

Slots

Slots allow you to customize specific aspects of the component completely, often replacing the old instances. Slots are passed parameters that allow the slot to interact with component data that is normally not exposed. Generally, an useColor (the function passed by theme:get()) function is passed as first parameter to allow the new components to use the same color as the parent component. When using slots, make sure to wrap any code that uses reactive values in a Computed (or any other classes that isolate state), to prevent unnecessary updates.

Indicator

Function Type

Code block has not loaded. An error may have occurred.

Theming

States

State	Description
Base

Colors

Color	Description
Background
Highlight
Indicator