diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_000000111864201.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000111864201.gif
new file mode 100644
index 0000000000000000000000000000000000000000..24702d37d233b9f10a83e4e36b8c8ff23393014f
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_000000111864201.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/loadingProgress.png b/en/application-dev/reference/arkui-ts/figures/loadingProgress.png
deleted file mode 100644
index afc52b1a469c858e3029282e193b684114803db0..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/loadingProgress.png and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
index 99621102ec5b15a628306cd8662e717df8ff2aff..2900183fcbbe5399cc4cc6d5c2962401c118f15d 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
@@ -1,33 +1,42 @@
 # LoadingProgress
 
-> **NOTE**<br>
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+The **\<LoadingProgress>** component is used to create a loading animation.
+
+>  **NOTE**
+>
+>  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
-The **<LoadingProgress>** component is used to display the loading progress.
 
 ## Required Permissions
 
 None
 
+
 ## Child Components
 
 None
 
+
 ## APIs
 
 LoadingProgress()
 
 Creates a **LoadingProgress** instance.
 
+
+
 ## Attributes
 
-| Name  | Type  | Default Value | Description                                   |
-| ----- | ----- | ------------- | --------------------------------------------- |
-| color | Color | -             | Foreground color of the loading progress bar. |
+| Name| Type| Default Value| Description|
+| -------- | -------- | -------- | -------- |
+| color | [ResourceColor](../../ui/ts-types.md) | - | Foreground color of the loading progress bar.|
+
+
 
 ## Example
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LoadingProgressExample {
@@ -41,4 +50,4 @@ struct LoadingProgressExample {
 }
 ```
 
-![en-us_image_0000001198839004](figures/loadingProgress.png)
\ No newline at end of file
+![en-us_image_000000111864201](figures/en-us_image_000000111864201.gif)