diff --git a/en/application-dev/reference/arkui-ts/figures/loadingProgress.png b/en/application-dev/reference/arkui-ts/figures/loadingProgress.png
new file mode 100644
index 0000000000000000000000000000000000000000..afc52b1a469c858e3029282e193b684114803db0
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/loadingProgress.png 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
new file mode 100644
index 0000000000000000000000000000000000000000..c7e5d0022e7b90ef0fa6a4755bbd3e7a4cdd8b47
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
@@ -0,0 +1,51 @@
+# LoadingProgress
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **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.|
+
+
+
+## Example
+
+```
+@Entry
+@Component
+struct LoadingProgressExample {
+  build() {
+    Column({ space: 5 }) {
+      Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      LoadingProgress()
+        .color(Color.Blue)
+    }.width('100%').margin({ top: 5 })
+  }
+}
+```
+
+![zh-cn_image_0000001198839004](figures/loadingProgress.png)