# LinearWavyProgressIndicator

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/LinearWavyProgressIndicator.composable#LinearWavyProgressIndicator(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, trackColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, stroke: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke, trackStroke: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke, gapSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, amplitude: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, wavelength: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, waveSpeed: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` [Material Design indeterminate linear wavy progress indicator](https://m3.material.io/components/progress-indicators/overview) | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/LinearWavyProgressIndicator.composable#LinearWavyProgressIndicator(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)( progress: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, trackColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, stroke: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke, trackStroke: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke, gapSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, stopSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, amplitude: (progress: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, wavelength: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, waveSpeed: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` [Material Design determinate wavy linear progress indicator](https://m3.material.io/components/progress-indicators/overview) | Cmn |

## Functions

### LinearWavyProgressIndicator

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/WavyProgressIndicator.kt+function:LinearWavyProgressIndicator)

```
@Composable
fun LinearWavyProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = WavyProgressIndicatorDefaults.indicatorColor,
    trackColor: Color = WavyProgressIndicatorDefaults.trackColor,
    stroke: Stroke = WavyProgressIndicatorDefaults.linearIndicatorStroke,
    trackStroke: Stroke = WavyProgressIndicatorDefaults.linearTrackStroke,
    gapSize: Dp = WavyProgressIndicatorDefaults.LinearIndicatorTrackGapSize,
    amplitude: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    wavelength: Dp = WavyProgressIndicatorDefaults.LinearIndeterminateWavelength,
    waveSpeed: Dp = wavelength
): Unit
```

[Material Design indeterminate linear wavy progress indicator](https://m3.material.io/components/progress-indicators/overview)

Progress indicators express an unspecified wait time or display the duration of a process.

![Indeterminate linear wavy progress indicator
image](https://developer.android.com/images/reference/androidx/compose/material3/indeterminate-linear-wavy-progress-indicator.png)

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.LinearWavyProgressIndicator
import androidx.compose.ui.Alignment

Column(horizontalAlignment = Alignment.CenterHorizontally) { LinearWavyProgressIndicator() }
```

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this progress indicator |
| `color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = WavyProgressIndicatorDefaults.indicatorColor` | the progress indicator color |
| `trackColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = WavyProgressIndicatorDefaults.trackColor` | the indicator's track color, visible when the progress has not reached the area of the overall indicator yet |
| `stroke: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke = WavyProgressIndicatorDefaults.linearIndicatorStroke` | a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke` that will be used to draw this indicator |
| `trackStroke: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke = WavyProgressIndicatorDefaults.linearTrackStroke` | a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke` that will be used to draw the indicator's track |
| `gapSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = WavyProgressIndicatorDefaults.LinearIndicatorTrackGapSize` | the gap between the track and the progress parts of the indicator |
| `amplitude: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 1.0f` | the wave's amplitude. 0.0 represents no amplitude, and 1.0 represents an amplitude that will take the full height of the progress indicator. Values outside of this range are coerced into the range. |
| `wavelength: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = WavyProgressIndicatorDefaults.LinearIndeterminateWavelength` | the length of a wave |
| `waveSpeed: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = wavelength` | the speed in which the wave will move when the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LinearWavyProgressIndicator(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` is greater than zero. The value here represents a DP per seconds, and by default it's matched to the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LinearWavyProgressIndicator(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to render an animation that moves the wave by one wave length per second. |

### LinearWavyProgressIndicator

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/WavyProgressIndicator.kt+function:LinearWavyProgressIndicator)

```
@Composable
fun LinearWavyProgressIndicator(
    progress: () -> Float,
    modifier: Modifier = Modifier,
    color: Color = WavyProgressIndicatorDefaults.indicatorColor,
    trackColor: Color = WavyProgressIndicatorDefaults.trackColor,
    stroke: Stroke = WavyProgressIndicatorDefaults.linearIndicatorStroke,
    trackStroke: Stroke = WavyProgressIndicatorDefaults.linearTrackStroke,
    gapSize: Dp = WavyProgressIndicatorDefaults.LinearIndicatorTrackGapSize,
    stopSize: Dp = WavyProgressIndicatorDefaults.LinearTrackStopIndicatorSize,
    amplitude: (progress: Float) -> Float = WavyProgressIndicatorDefaults.indicatorAmplitude,
    wavelength: Dp = WavyProgressIndicatorDefaults.LinearDeterminateWavelength,
    waveSpeed: Dp = wavelength
): Unit
```

[Material Design determinate wavy linear progress indicator](https://m3.material.io/components/progress-indicators/overview)

Progress indicators express an unspecified wait time or display the duration of a process.

![Linear wavy progress indicator
image](https://developer.android.com/images/reference/androidx/compose/material3/linear-wavy-progress-indicator.png)

This version of a linear progress indicator accepts arguments, such as `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LinearWavyProgressIndicator(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LinearWavyProgressIndicator(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, and `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LinearWavyProgressIndicator(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to render the progress as a waveform.

By default there is no animation between `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LinearWavyProgressIndicator(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` values. You can use `https://developer.android.com/reference/kotlin/androidx/compose/material3/WavyProgressIndicatorDefaults#ProgressAnimationSpec()` as the default recommended `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationSpec` when animating progress, such as in the following example:

```kotlin
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.width
import androidx.compose.material3.LinearWavyProgressIndicator
import androidx.compose.material3.ProgressIndicatorDefaults
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSliderState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val sliderState = rememberSliderState(0.1f)
val animatedProgress by
    animateFloatAsState(
        targetValue = sliderState.value,
        animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec,
    )

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    LinearWavyProgressIndicator(progress = { animatedProgress })
    Spacer(Modifier.requiredHeight(30.dp))
    Text("Set progress:")
    Slider(
        state = sliderState,
        onValueChange = { sliderState.value = it },
        modifier = Modifier.width(300.dp),
    )
}
```

You may also follow the Material guidelines to create a thicker version of this indicator, like in this example:

```kotlin
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.width
import androidx.compose.material3.LinearWavyProgressIndicator
import androidx.compose.material3.ProgressIndicatorDefaults
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSliderState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp

val sliderState = rememberSliderState(0.1f)
val animatedProgress by
    animateFloatAsState(
        targetValue = sliderState.value,
        animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec,
    )

val thickStrokeWidth = with(LocalDensity.current) { 8.dp.toPx() }
val thickStroke =
    remember(thickStrokeWidth) { Stroke(width = thickStrokeWidth, cap = StrokeCap.Round) }

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    LinearWavyProgressIndicator(
        progress = { animatedProgress },
        // Thick height is slightly higher than the
        // WavyProgressIndicatorDefaults.LinearContainerHeight default
        modifier = Modifier.height(14.dp),
        stroke = thickStroke,
        trackStroke = thickStroke,
    )
    Spacer(Modifier.requiredHeight(30.dp))
    Text("Set progress:")
    Slider(
        state = sliderState,
        onValueChange = { sliderState.value = it },
        modifier = Modifier.width(300.dp),
    )
}
```

| Parameters |
|---|---|
| `progress: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | the progress of this progress indicator, where 0.0 represents no progress and 1.0 represents full progress. Values outside of this range are coerced into the range. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this progress indicator |
| `color: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = WavyProgressIndicatorDefaults.indicatorColor` | the progress indicator color |
| `trackColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = WavyProgressIndicatorDefaults.trackColor` | the indicator's track color, visible when the progress has not reached the area of the overall indicator yet |
| `stroke: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke = WavyProgressIndicatorDefaults.linearIndicatorStroke` | a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke` that will be used to draw this indicator |
| `trackStroke: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke = WavyProgressIndicatorDefaults.linearTrackStroke` | a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke` that will be used to draw the indicator's track |
| `gapSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = WavyProgressIndicatorDefaults.LinearIndicatorTrackGapSize` | the gap between the track and the progress parts of the indicator |
| `stopSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = WavyProgressIndicatorDefaults.LinearTrackStopIndicatorSize` | the size of the stop indicator at the end of the track. Note that the stop indicator is required if the track has a contrast below 3:1 with its container or the surface behind the container. |
| `amplitude: (progress: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = WavyProgressIndicatorDefaults.indicatorAmplitude` | a lambda that provides an amplitude for the wave path as a function of the indicator's progress. 0.0 represents no amplitude, and 1.0 represents an amplitude that will take the full height of the progress indicator. Values outside of this range are coerced into the range. |
| `wavelength: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = WavyProgressIndicatorDefaults.LinearDeterminateWavelength` | the length of a wave. Will be applied in case the path has an `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LinearWavyProgressIndicator(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` that is greater than zero and represents a wave. |
| `waveSpeed: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = wavelength` | the speed in which the wave will move when the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LinearWavyProgressIndicator(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` is greater than zero. The value here represents a DP per seconds, and by default it's matched to the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LinearWavyProgressIndicator(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` to render an animation that moves the wave by one wave length per second. |