Progress Indicators

Determinate and indeterminate indicators for loading and task progress.

Use progress indicators to show completion state or ongoing work.

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.composables.ui.components.ProgressIndicator
import kotlinx.coroutines.delay
import kotlin.time.Duration.Companion.milliseconds

@Composable
fun ProgressIndicatorExample() {
    var progress by remember { mutableFloatStateOf(0.28f) }

    LaunchedEffect(Unit) {
        delay(500.milliseconds)
        progress = 0.64f
    }

    ProgressIndicator(progress = progress, modifier = Modifier.fillMaxWidth())
}

Installation

implementation("com.composables:ui:0.1.0")

Add the required dependencies

implementation("com.composables:composeunstyled:2.7.0")

Copy and paste the following sources into your project

components/Progress.kt

ExpandCollapseView on GitHub

package com.composables.ui.components

import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.isSpecified
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.composables.ui.theme.colors
import com.composables.ui.theme.controlColor
import com.composables.ui.theme.primaryColor
import com.composeunstyled.Indicator
import com.composeunstyled.UnstyledProgress
import com.composeunstyled.buildModifier
import com.composeunstyled.theme.Theme

/**
 * A determinate progress indicator for known completion state.
 * @param progress Current progress value clamped between 0 and 1.
 * @param modifier Modifier applied to the indicator.
 * @param shape Shape used for the track and indicator.
 * @param trackColor Color used for the indicator track.
 * @param indicatorColor Color used for the active progress indicator.
 * @param borderColor Optional border color drawn around the track.
 * @param height Height of the progress indicator.
 */
@Composable
fun ProgressIndicator(
    progress: Float,
    modifier: Modifier = Modifier,
    shape: Shape = RoundedCornerShape(999.dp),
    trackColor: Color = Theme[colors][controlColor],
    indicatorColor: Color = Theme[colors][primaryColor],
    borderColor: Color = Color.Unspecified,
    height: Dp = 6.dp,
) {
    val animatedProgress by animateFloatAsState(
        targetValue = progress.coerceIn(0f, 1f),
        animationSpec = tween(durationMillis = 250),
        label = "ProgressIndicatorProgress",
    )

    UnstyledProgress(
        progress = animatedProgress,
        modifier = modifier.progressIndicatorContainer(
            shape = shape,
            trackColor = trackColor,
            borderColor = borderColor,
            height = height,
        ),
    ) {
        Indicator(
            modifier = Modifier
                .clip(shape)
                .background(indicatorColor, shape),
        )
    }
}

/**
 * A looping progress indicator for ongoing work without a known end point.
 * @param modifier Modifier applied to the indicator.
 * @param shape Shape used for the track and indicator.
 * @param trackColor Color used for the indicator track.
 * @param indicatorColor Color used for the active progress indicator.
 * @param borderColor Optional border color drawn around the track.
 * @param height Height of the progress indicator.
 */
@Composable
fun IndeterminateProgressIndicator(
    modifier: Modifier = Modifier,
    shape: Shape = RoundedCornerShape(999.dp),
    trackColor: Color = Theme[colors][controlColor],
    indicatorColor: Color = Theme[colors][primaryColor],
    borderColor: Color = Color.Unspecified,
    height: Dp = 6.dp,
) {
    val transition = rememberInfiniteTransition()
    val offset by transition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = 1100, easing = LinearEasing),
            repeatMode = RepeatMode.Restart,
        ),
    )
    UnstyledProgress(
        modifier = modifier.progressIndicatorContainer(
            shape = shape,
            trackColor = trackColor,
            borderColor = borderColor,
            height = height,
        ),
    ) {
        BoxWithConstraints(Modifier.fillMaxWidth().fillMaxHeight()) {
            val indicatorWidth = maxWidth * 0.35f
            val indicatorOffset = (maxWidth + indicatorWidth) * offset - indicatorWidth
            Box(
                Modifier
                    .fillMaxHeight()
                    .width(indicatorWidth)
                    .offset(x = indicatorOffset)
                    .clip(shape)
                    .background(indicatorColor, shape),
            )
        }
    }
}

private fun Modifier.progressIndicatorContainer(
    shape: Shape,
    trackColor: Color,
    borderColor: Color,
    height: Dp,
): Modifier {
    return this
        .height(height)
        .clip(shape)
        .background(trackColor, shape)
        .then(buildModifier {
            if (borderColor.isSpecified && borderColor != Color.Transparent) {
                add(Modifier.border(1.dp, borderColor, shape))
            }
        })
}

components/Utils.kt

ExpandCollapseView on GitHub

package com.composables.ui.components

import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.foundation.interaction.InteractionSource
import androidx.compose.foundation.interaction.collectIsFocusedAsState
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.composables.ui.theme.colors
import com.composables.ui.theme.ringColor
import com.composeunstyled.FocusRingVisibility
import com.composeunstyled.collectIsFocusVisibleAsState
import com.composeunstyled.outline
import com.composeunstyled.theme.Theme

@Composable
fun Modifier.focusRing(
    interactionSource: InteractionSource,
    width: Dp = 2.dp,
    color: Color = Theme[colors][ringColor],
    shape: Shape = RectangleShape,
    offset: Dp = 0.dp,
    visibility: FocusRingVisibility = FocusRingVisibility.FocusVisible,
): Modifier {
    val showFocusRing by if (visibility == FocusRingVisibility.FocusVisible) {
        interactionSource.collectIsFocusVisibleAsState()
    } else {
        interactionSource.collectIsFocusedAsState()
    }
    val animatedWidth by animateDpAsState(
        targetValue = if (showFocusRing) width else 0.dp,
        animationSpec = tween(durationMillis = 120),
        label = "FocusRingWidth",
    )

    return this then Modifier.outline(
        width = animatedWidth,
        color = color,
        shape = shape,
        offset = offset,
    )
}

@Composable
fun Modifier.bouncyPress(
    interactionSource: InteractionSource,
    enabled: Boolean = true,
    pressedScale: Float = 0.98f,
): Modifier {
    val pressed by interactionSource.collectIsPressedAsState()
    val scale by animateFloatAsState(
        targetValue = if (enabled && pressed) pressedScale else 1f,
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessMediumLow,
        ),
        label = "BouncyPressScale",
    )

    return this then Modifier.graphicsLayer {
        scaleX = scale
        scaleY = scale
    }
}

Examples

Indeterminate

ExpandCollapseView on GitHub

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.composables.ui.components.IndeterminateProgressIndicator

@Composable
fun IndeterminateProgressIndicatorExample() {
    IndeterminateProgressIndicator(modifier = Modifier.fillMaxWidth())
}

API Reference

ProgressIndicator

A determinate progress indicator for known completion state.

@Composable
fun ProgressIndicator(
    progress: Float,
    modifier: Modifier = Modifier,
    shape: Shape = RoundedCornerShape(999.dp),
    trackColor: Color = Theme[colors][controlColor],
    indicatorColor: Color = Theme[colors][primaryColor],
    borderColor: Color = Color.Unspecified,
    height: Dp = 6.dp,
)

Parameter	Type	Description
`progress`	`Float`	Current progress value clamped between 0 and 1.
`modifier`	`Modifier`	Modifier applied to the indicator.
`shape`	`Shape`	Shape used for the track and indicator.
`trackColor`	`Color`	Color used for the indicator track.
`indicatorColor`	`Color`	Color used for the active progress indicator.
`borderColor`	`Color`	Optional border color drawn around the track.
`height`	`Dp`	Height of the progress indicator.

IndeterminateProgressIndicator

A looping progress indicator for ongoing work without a known end point.

@Composable
fun IndeterminateProgressIndicator(
    modifier: Modifier = Modifier,
    shape: Shape = RoundedCornerShape(999.dp),
    trackColor: Color = Theme[colors][controlColor],
    indicatorColor: Color = Theme[colors][primaryColor],
    borderColor: Color = Color.Unspecified,
    height: Dp = 6.dp,
)

Parameter	Type	Description
`modifier`	`Modifier`	Modifier applied to the indicator.
`shape`	`Shape`	Shape used for the track and indicator.
`trackColor`	`Color`	Color used for the indicator track.
`indicatorColor`	`Color`	Color used for the active progress indicator.
`borderColor`	`Color`	Optional border color drawn around the track.
`height`	`Dp`	Height of the progress indicator.

Installation

Gradle

Copy & Paste

Add the required dependencies

Copy and paste the following sources into your project

Examples

Indeterminate

API Reference

ProgressIndicator

IndeterminateProgressIndicator