OudsCircularProgressIndicator
A Circular Progress Indicator shows the progress of a task using a circle. Useful when you need more visual focus or when space is limited.
This version of the circular progress indicator is determinate. Use the other signature for an indeterminate progress.
The component automatically scales all dimensions (stroke width, gap size) proportionally based on its effective size (after applying the modifier). A scale factor is calculated by dividing the actual size by the default size from tokens, then this scale is applied to all dimensions to maintain consistent proportions.
Design
| Name | Progress Indicator |
| Version | 1.0.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 circular progress indicator.
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.
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.
Samples
OudsCircularProgressIndicator(progress = { 0.75f })A Circular Progress Indicator shows the progress of a task using a circle. Useful when you need more visual focus or when space is limited.
This version of the circular progress indicator is indeterminate. Use the other signature for a determinate progress.
The component automatically scales all dimensions (stroke width, gap size) proportionally based on its effective size (after applying the modifier). A scale factor is calculated by dividing the actual size by the default size from tokens, then this scale is applied to all dimensions to maintain consistent proportions.
Design
| Name | Progress Indicator |
| Version | 1.0.0 |
Parameters
The Modifier to be applied to this circular progress indicator.
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.
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.
Samples
OudsCircularProgressIndicator()