OudsLinearProgressIndicator

fun OudsLinearProgressIndicator(progress: () -> Float, modifier: Modifier = Modifier, brandColor: Boolean = true, track: Boolean = true, helperText: String? = null)

A Linear Progress Indicator shows the progress of a task using a horizontal line. It can show a specific value (determinate) or just that something is in progress (indeterminate). Best used inside layouts to show progress.

This version of the linear progress indicator is determinate. Use the other signature for an indeterminate progress.

Design

NameProgress Indicator
Version1.0.0

Parameters

progress

The progress of this indicator, where 0.0 represents no progress and 1.0 represents full progress. Values outside of this range are coerced into the range.

modifier

The Modifier to be applied to this linear progress indicator.

brandColor

Whether the brand color is used for the indicator color or the default color. Use true for important, user-triggered actions like upload, submit, or confirm. Also use it when maintaining visual consistency with a branded interface or artistic direction. Use false for background or secondary processes. Use it when the indicator should not compete with the main content or when a more neutral tone is required.

track

Whether the track is displayed or not. Use true when the indicator is shown on its own and needs a clear structure. The track helps define the full range of progress and makes the value easier to read (for determinate variant). Use false when the indicator is embedded inside another component (e.g. button, tag, toast). Also use it when a more minimal and lightweight appearance is needed.

helperText

Optional additional text displayed with the progress indicator. Helper text can provide context about the process or show the current progress value.

Samples

OudsLinearProgressIndicator(
    progress = { 0.75f },
    helperText = "Loading 75%"
)

fun OudsLinearProgressIndicator(modifier: Modifier = Modifier, brandColor: Boolean = true, track: Boolean = true, helperText: String? = null)

A Linear Progress Indicator shows the progress of a task using a horizontal line. It can show a specific value (determinate) or just that something is in progress (indeterminate). Best used inside layouts to show progress.

This version of the linear progress indicator is indeterminate. Use the other signature for a determinate progress.

Design

NameProgress Indicator
Version1.0.0

Parameters

modifier

The Modifier to be applied to this linear progress indicator.

brandColor

Whether the brand color is used for the indicator color or the default color. Use true for important, user-triggered actions like upload, submit, or confirm. Also use it when maintaining visual consistency with a branded interface or artistic direction. Use false for background or secondary processes. Use it when the indicator should not compete with the main content or when a more neutral tone is required.

track

Whether the track is displayed or not. Use true when the indicator is shown on its own and needs a clear structure. The track helps define the full range of progress and makes the value easier to read (for determinate variant). Use false when the indicator is embedded inside another component (e.g. button, tag, toast). Also use it when a more minimal and lightweight appearance is needed.

helperText

Optional additional text displayed with the progress indicator. Helper text can provide context about the process or show the current progress value.

Samples

OudsLinearProgressIndicator(
    helperText = "Loading..."
)