OudsLinearProgressIndicator
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
| Name | Linear Progress Indicator |
| Version | 1.1.0 |
Parameters
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.
The Modifier to be applied to this linear progress indicator.
The status of the progress indicator. Its color is based on this status. See OudsProgressIndicatorStatus for allowed values.
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.
Whether a stop indicator is displayed or not. It allows to identify the end of the track easily. To respect accessibility criteria, it is required if the track has a contrast below 3:1 with its container or the surface behind the container.
Text label to display below the progress indicator. For more control over helper text display (including progress percentage), use the overload that accepts OudsDeterminateLinearProgressIndicatorHelperText.
The size of the gap between the progress indicator and the track.
Samples
OudsLinearProgressIndicator(
progress = { 0.75f },
status = OudsProgressIndicatorStatus.Accent
)OudsLinearProgressIndicator(
progress = { 0.75f },
helperText = "Uploading file..."
)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
| Name | Linear Progress Indicator |
| Version | 1.1.0 |
Parameters
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.
Configuration for helper text displayed below the progress indicator. Allows displaying progress percentage and/or custom label with configurable alignment. See OudsDeterminateLinearProgressIndicatorHelperText.
The Modifier to be applied to this linear progress indicator.
The status of the progress indicator. Its color is based on this status. See OudsProgressIndicatorStatus for allowed values.
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.
Whether a stop indicator is displayed or not. It allows to identify the end of the track easily. To respect accessibility criteria, it is required if the track has a contrast below 3:1 with its container or the surface behind the container.
The size of the gap between the progress indicator and the track.
Samples
OudsLinearProgressIndicator(
progress = { 0.75f },
helperText = OudsDeterminateLinearProgressIndicatorHelperText(
progress = true,
label = "Uploading file...",
progressAlignment = Alignment.Start,
labelAlignment = Alignment.End
)
)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
| Name | Linear Progress Indicator |
| Version | 1.1.0 |
Parameters
The Modifier to be applied to this linear progress indicator.
The status of the progress indicator. Its color is based on this status. See OudsProgressIndicatorStatus for allowed values.
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.
Whether a stop indicator is displayed or not. It allows to identify the end of the track easily. To respect accessibility criteria, it is required if the track has a contrast below 3:1 with its container or the surface behind the container.
Text label to display below the progress indicator. For more control over alignment, use the overload that accepts OudsIndeterminateLinearProgressIndicatorHelperText.
The size of the gap between the progress indicator and the track.
Samples
OudsLinearProgressIndicator()OudsLinearProgressIndicator(helperText = "Processing...")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
| Name | Linear Progress Indicator |
| Version | 1.1.0 |
Parameters
The Modifier to be applied to this linear progress indicator.
Configuration for helper text displayed below the progress indicator with configurable alignment. See OudsIndeterminateLinearProgressIndicatorHelperText.
The status of the progress indicator. Its color is based on this status. See OudsProgressIndicatorStatus for allowed values.
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.
Whether a stop indicator is displayed or not. It allows to identify the end of the track easily. To respect accessibility criteria, it is required if the track has a contrast below 3:1 with its container or the surface behind the container.
The size of the gap between the progress indicator and the track.
Samples
OudsLinearProgressIndicator(
helperText = OudsIndeterminateLinearProgressIndicatorHelperText(
label = "Processing...",
alignment = Alignment.Start
)
)