# CircularWavyProgressIndicator

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/CircularWavyProgressIndicator.composable#CircularWavyProgressIndicator(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 circular 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/CircularWavyProgressIndicator.composable#CircularWavyProgressIndicator(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,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, 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 circular progress indicator](https://m3.material.io/components/progress-indicators/overview) | Cmn |

## Functions

### CircularWavyProgressIndicator

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:CircularWavyProgressIndicator)

```
@Composable
fun CircularWavyProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = WavyProgressIndicatorDefaults.indicatorColor,
    trackColor: Color = WavyProgressIndicatorDefaults.trackColor,
    stroke: Stroke = WavyProgressIndicatorDefaults.circularIndicatorStroke,
    trackStroke: Stroke = WavyProgressIndicatorDefaults.circularTrackStroke,
    gapSize: Dp = WavyProgressIndicatorDefaults.CircularIndicatorTrackGapSize,
    amplitude: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    wavelength: Dp = WavyProgressIndicatorDefaults.CircularWavelength,
    waveSpeed: Dp = wavelength
): Unit
```

[Material Design indeterminate circular 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 circular wavy progress indicator
image](https://developer.android.com/images/reference/androidx/compose/material3/indeterminate-circular-wavy-progress-indicator.png)

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

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

| 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.circularIndicatorStroke` | 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.circularTrackStroke` | 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.CircularIndicatorTrackGapSize` | 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.CircularWavelength` | the length of a wave in this circular indicator. Note that the actual wavelength may be different to ensure a continuous wave shape. |
| `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#CircularWavyProgressIndicator(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#CircularWavyProgressIndicator(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. Note that the actual speed may be slightly different, as the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#CircularWavyProgressIndicator(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)` can be adjusted to ensure a continuous wave shape. |

### CircularWavyProgressIndicator

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:CircularWavyProgressIndicator)

```
@Composable
fun CircularWavyProgressIndicator(
    progress: () -> Float,
    modifier: Modifier = Modifier,
    color: Color = WavyProgressIndicatorDefaults.indicatorColor,
    trackColor: Color = WavyProgressIndicatorDefaults.trackColor,
    stroke: Stroke = WavyProgressIndicatorDefaults.circularIndicatorStroke,
    trackStroke: Stroke = WavyProgressIndicatorDefaults.circularTrackStroke,
    gapSize: Dp = WavyProgressIndicatorDefaults.CircularIndicatorTrackGapSize,
    amplitude: (progress: Float) -> Float = WavyProgressIndicatorDefaults.indicatorAmplitude,
    wavelength: Dp = WavyProgressIndicatorDefaults.CircularWavelength,
    waveSpeed: Dp = wavelength
): Unit
```

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

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

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

By default there is no animation between `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#CircularWavyProgressIndicator(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,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/ProgressIndicatorDefaults#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.CircularWavyProgressIndicator
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) {
    CircularWavyProgressIndicator(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.requiredHeight
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.CircularWavyProgressIndicator
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) {
    CircularWavyProgressIndicator(
        progress = { animatedProgress },
        // Thick size is slightly larger than the
        // WavyProgressIndicatorDefaults.CircularContainerSize default
        modifier = Modifier.size(52.dp), // Thick size is slightly larger than the default
        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.circularIndicatorStroke` | 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.circularTrackStroke` | 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.CircularIndicatorTrackGapSize` | the gap between the track and the progress parts of the indicator |
| `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 a max amplitude. Values outside of this range are coerced into the range. |
| `wavelength: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = WavyProgressIndicatorDefaults.CircularWavelength` | the length of a wave in this circular indicator. Note that the actual wavelength may be different to ensure a continuous wave shape. |
| `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#CircularWavyProgressIndicator(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,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#CircularWavyProgressIndicator(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,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. Note that the actual speed may be slightly different, as the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#CircularWavyProgressIndicator(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,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` can be adjusted to ensure a continuous wave shape. |