Compose canvas custom circular progress bar

@Composable
fun CircleRing(boxWidthDp: Int, viewModel: TaskViewModel) {
    Canvas(modifier = Modifier.size(boxWidthDp.dp), onDraw = {
        val strokWidth = 30F
        // Grey background 
        drawArc(
            Color(0, 0, 0, 15),
            startAngle = 160f,
            sweepAngle = 220f,
            useCenter = false,
            style = Stroke(strokWidth, cap = StrokeCap.Round),
        )

        drawArc(
            Color.White,
            startAngle = 160f,
            sweepAngle = viewModel.pointOfYearPercent,
            useCenter = false,
            style = Stroke(strokWidth, cap = StrokeCap.Round),
        )

    })
}

The progress is self-contained

    // Academic year points 
    var pointOfYear by mutableStateOf(10000)
        private set

    // Progress of academic year points  220f *  pointOfYear /  Total academic year points 
    var pointOfYearPercent by mutableStateOf(0f)
        private set

    /**
     *  Update learning progress 
     */
    fun updatePointPercent() {
        pointOfYearPercent = 220f * pointOfYear / totalPointOfYear
    }

effect

  The whole content data is as follows

       Box(contentAlignment = Alignment.Center,
                    modifier = Modifier
                        .height(boxWidthDp.dp)
                        .padding(top = 16.dp)
                ) {
                    // ring 
                    CircleRing(boxWidthDp = boxWidthDp, taskViewModel)
                    // Progress data 
                    Column(modifier = Modifier
                        .align(Alignment.Center)
                        .fillMaxWidth(),
                        horizontalAlignment = Alignment.CenterHorizontally) {
                        Text(buildAnnotatedString {
                            append(taskViewModel.pointOfYear.toString())
                            withStyle(SpanStyle(fontSize = 10.sp)) {
                                append(" branch ")

                            }
                        },
                            fontSize = 36.sp,
                            color = Color.White)

                        Text(text = " Academic year points ", fontSize = 12.sp,
                            color = Color.White)

                    }

                }

Remember to shift it upward in the next component 40dp Otherwise, there is too much space