diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/arkts-capsuleProgressStyleEffect.png b/zh-cn/application-dev/reference/arkui-ts/figures/arkts-capsuleProgressStyleEffect.png
new file mode 100644
index 0000000000000000000000000000000000000000..1601e0a264f3c542b92dcc5b0a832ceadc859cfd
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/arkts-capsuleProgressStyleEffect.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/arkts-ringProgressAnimation.gif b/zh-cn/application-dev/reference/arkui-ts/figures/arkts-ringProgressAnimation.gif
new file mode 100644
index 0000000000000000000000000000000000000000..03f51b4f9a6256d2804484b6dc5053faf3c6cc3a
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/arkts-ringProgressAnimation.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/arkts-ringProgressStyleEffect.png b/zh-cn/application-dev/reference/arkui-ts/figures/arkts-ringProgressStyleEffect.png
new file mode 100644
index 0000000000000000000000000000000000000000..01e7f58520ed726b6c16706fb877988e92acf772
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/arkts-ringProgressStyleEffect.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
index 959378f998817c5a233619c29dd1125d4c4a816d..45a5b9de4f9badd48922cdc7a2cbb2dbe710a199 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
@@ -117,7 +117,8 @@ Progress(options: {value: number, total?: number, type?: ProgressType})
 支持[通用事件](ts-universal-events-click.md)。
 
 ## 示例
-
+### 示例1
+各进度条基础属性效果
 ```ts
 // xxx.ets
 @Entry
@@ -177,3 +178,74 @@ struct ProgressExample {
 ```
 
 ![progress](figures/arkts-progress.png)
+
+### 示例2
+环形进度条视觉属性
+```ts
+@Entry
+@Component
+struct ProgressExample {
+  private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 },
+                                                              { color: Color.Orange, offset: 1.0 }])
+  build() {
+    Column({ space: 15 }) {
+      Text('Gradient Color').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Progress({ value: 70, total: 100, type: ProgressType.Ring })
+        .width(100).style({ strokeWidth: 20 })
+        .color(this.gradientColor)
+
+      Text('Shadow').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Progress({ value: 70, total: 100, type: ProgressType.Ring })
+        .width(120).color(Color.Orange)
+        .style({ strokeWidth: 20, shadow: true })
+    }.width('100%').padding({ top: 5 })
+  }
+}
+```
+![ringProgressStyleEffect](figures/arkts-ringProgressStyleEffect.png)
+
+### 示例3
+环形进度条动效
+```ts
+@Entry
+@Component
+struct ProgressExample {
+  private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 },
+                                                              { color: Color.Orange, offset: 1.0 }])
+  build() {
+    Column({ space: 15 }) {
+      Text('Loading Effect').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Progress({ value: 0, total: 100, type: ProgressType.Ring })
+        .width(100).color(Color.Blue)
+        .style({ strokeWidth: 20, status: ProgressStatus.LOADING })
+
+      Text('Scan Effect').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Progress({ value: 30, total: 100, type: ProgressType.Ring })
+        .width(100).color(Color.Orange)
+        .style({ strokeWidth: 20, enableScanEffect: true })
+    }.width('100%').padding({ top: 5 })
+  }
+}
+```
+![ringProgressAnimation](figures/arkts-ringProgressAnimation.gif)
+
+### 示例4
+胶囊形进度条视觉属性
+```ts
+@Entry
+@Component
+struct ProgressExample {
+
+  build() {
+    Column({ space: 15 }) {
+      Row({ space: 40 }) {
+        Progress({ value: 100, total: 100,type: ProgressType.Capsule }).width(100).height(50)
+          .style({borderColor: Color.Blue, borderWidth: 1, content: 'Installing...',
+                  font: {size: 13, style: FontStyle.Normal}, fontColor: Color.Gray,
+                  enableScanEffect: false, showDefaultPercentage: false})
+      }
+    }.width('100%').padding({ top: 5 })
+  }
+}
+```
+![capsuleProgressStyleEffect](figures/arkts-capsuleProgressStyleEffect.png)