HarmonyOS 鸿蒙Next中如何使用Progress组件显示缓冲进度并在媒体播放中应用 鸿蒙系统中Progress组件有哪些常见的进度条类型

从0到100进度条动画参考：

@Entry
@Component
struct Index {
  @State progressValue: number = 100
  @State animationId: number | null = null

  build() {
    NavDestination() {
      Column({ space: 15 }) {
        Progress({ value: 0, total: 100, type: ProgressType.Ring })
          .color('#A97CF9')
          .value(this.progressValue)
          .width(100)
          .style({
            strokeWidth: 10,
            scaleCount: 20,
            scaleWidth: 5,
            enableSmoothEffect: true
          })
          .backgroundColor(Color.White)
          .rotate({
            x: 0,
            y: 1,
            z: 0,
            centerX: '50%',
            centerY: '50%',
            angle: 180
          })
        Button('开始动画')
          .onClick(() => {
            if (this.animationId === null) {
              this.animationId = setInterval(() => {
                this.progressValue--
                if (this.progressValue == 0) {
                  this.progressValue = 100
                }
              }, 20)
            }
            console.log(this.animationId.toString())
          })
        Button('结束动画').onClick(() => {
          clearInterval(this.animationId)
          this.animationId = null
          this.progressValue = 100
        })
      }.width('100%').padding({ top: 5 }).backgroundColor(Color.Red)
    }
  }
}