render (h, context) {
    const { data, injections, props, slots } = context
    const colorMode = injections.$chakraColorMode()

    const _trackColor = { light: `${props.trackColor}.100`, dark: 'whiteAlpha.300' }
    const _color = { light: `${props.color}.500`, dark: `${props.color}.200` }

    const {
      rootData,
      indicatorCircleData,
      svgData,
      trackCircleData
    } = getComputedProps({
      min: props.min,
      max: props.max,
      value: props.value,
      size: props.size,
      angle: props.angle,
      thickness: props.thickness,
      capIsRound: props.capIsRound,
      isIndeterminate: props.isIndeterminate,
      color: _color[colorMode],
      trackColor: _trackColor[colorMode],
      isTransitioned: props.isTransitioned
    })
    return h(CBox, {
      ...data,
      props,
      attrs: {
        ...rootData,
        ...data.attrs,
        'data-chakra-component': 'CCircularProgress'
      }
    }, [
      h(CBox, {
        props: { as: 'svg' },
        attrs: svgData
      }, [
        h(CBox, { props: { as: 'circle' }, attrs: trackCircleData }),
        h(CBox, { props: { as: 'circle' }, attrs: indicatorCircleData })
      ]),
      slots().default
    ])
  }
CCircularProgressLabel component

Indicates the progress for both determinate and indeterminate processes.

@extends CBox
@see Docs https://vue.chakra-ui.com/circularprogress