Skip to content

Progress Indicator

A foundational component used to display progress in a linear bar format in Compose Multiplatform.

Accessible out of the box and fully renderless, so that you can apply any styling you like.

Installation

build.gradle.kts
dependencies {
    implementation("com.composables:core:1.23.1")
}

Basic Example

To create a progress indicator use the ProgressIndicator component. It sets up the required accessibility semantics according to the given progress.

We also provide the ProgressBar component which renders the given progress.

ProgressIndicator(
    progress = 0.5f,
    modifier = Modifier.width(400.dp).height(24.dp).shadow(4.dp, RoundedCornerShape(100)),
    shape = RoundedCornerShape(100),
    backgroundColor = Color(0xff176153),
    contentColor = Color(0xffb6eabb),
) {
    Box(Modifier.fillMaxWidth(0.5f).fillMaxHeight().background(color, shape))
}

Styling

Every component in Compose Unstyled is renderless. They handle all UX pattern logic, internal state, accessibility ( according to ARIA standards), and keyboard interactions for you, but they do not render any UI to the screen.

This is by design so that you can style your components exactly to your needs.

Most of the time, styling is done using Modifiers of your choice. However, sometimes this is not enough due to the order of the Modifiers affecting the visual outcome.

For such cases we provide specific styling parameters or optional components.

Styling the track and fill

The ProgressIndicator is renders the track of the progress bar, and any related styling can be passed as parameters.

It is up to you to render the progress (usually fill) any way you like, by passing a composable as the indicator's content.

The optional ProgressBar component can be used as a batteries-included progress bar component if you need a traditional looking progress bar in your app.

Component API

ProgressIndicator

Parameter Description
progress (Optional) A float value between 0 and 1 representing the progress. Skipping this value, will treat the progress as intermediate for accessibility purposes.
modifier Modifier to be applied to the progress bar.
shape Shape of the progress bar.
backgroundColor Background color of the progress bar.
contentColor Color of the content within the progress bar.
content A composable function that defines the content of the progress indicator.

ProgressBar

Parameter Description
shape Shape of the progress bar.
color Color of the progress portion of the bar.

Styled Examples

Looking for styled components for Jetpack Compose or Compose Multiplatform?

Explore a rich collection of production ready examples at ComposablesUi.com

Composables UI