diff --git a/packages/arcodesign-vue/components/components.ts b/packages/arcodesign-vue/components/components.ts
index 83404a9a..c4385033 100644
--- a/packages/arcodesign-vue/components/components.ts
+++ b/packages/arcodesign-vue/components/components.ts
@@ -1,12 +1,14 @@
 import badgeDefault from './badge';
 import cellDefault from './cell';
 import contextProviderDefault from './context-provider';
+import loadingDefault from './loading';
 import notifyDefault from './notify';
 import transitionDefault from './transition';
 
 export * from './badge';
 export * from './cell';
 export * from './context-provider';
+export * from './loading';
 export * from './notify';
 export * from './transition';
 
@@ -14,6 +16,7 @@ export const allCompInstall = [
     badgeDefault.install,
     cellDefault.install,
     contextProviderDefault.install,
+    loadingDefault.install,
     notifyDefault.install,
     transitionDefault.install,
 ];
diff --git a/packages/arcodesign-vue/components/loading/Loading.vue b/packages/arcodesign-vue/components/loading/Loading.vue
new file mode 100644
index 00000000..22131a00
--- /dev/null
+++ b/packages/arcodesign-vue/components/loading/Loading.vue
@@ -0,0 +1,258 @@
+<!-- Note: Generated by AI, needs verification -->
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { isOneOf } from '@arco-design/mobile-utils';
+import { getPrefixCls } from '../context-provider';
+import { LoadingProps } from './type';
+
+defineOptions({
+    name: 'Loading',
+});
+
+const props = withDefaults(defineProps<LoadingProps>(), {
+    type: 'dot',
+    duration: 1000,
+    radius: 9,
+    stroke: 2,
+    filleted: true,
+    svgKey: '',
+});
+
+const prefix = getPrefixCls('loading');
+const statusList = ref<number[]>([]);
+const timerId = ref<number>(-1);
+
+// 计算属性
+const halfCircle = computed(() => Math.PI * props.radius);
+const circlePos = computed(() => 0.5 * props.stroke + props.radius);
+const circleSize = computed(() => props.radius * 2 + props.stroke);
+const actualSvgKey = computed(() => props.svgKey || `${Date.now()}-${Math.random()}`);
+
+// 获取样式与浏览器前缀
+function getStyleWithVendor(style: Record<string, any>) {
+    return style;
+}
+
+// 动画逻辑
+function startAnimation() {
+    if (props.type === 'dot' && statusList.value.length) {
+        const interval = props.duration / statusList.value.length;
+        timerId.value = window.setInterval(() => {
+            const newList = [...statusList.value];
+            const item = newList.pop();
+            if (item !== undefined) {
+                newList.unshift(item);
+            }
+            statusList.value = newList;
+        }, interval);
+    }
+}
+
+function stopAnimation() {
+    if (timerId.value >= 0) {
+        clearInterval(timerId.value);
+        timerId.value = -1;
+    }
+}
+
+// 初始化状态列表
+function initStatusList() {
+    let newList: number[];
+    if (props.list && props.list.length) {
+        newList = props.list;
+    } else {
+        switch (props.type) {
+            case 'spin':
+                newList = [1, 0.1, 0.2286, 0.3572, 0.4858, 0.6144, 0.743, 0.8716];
+                break;
+            case 'dot':
+                newList = [0.2, 0.6, 1];
+                break;
+            default:
+                newList = [];
+                break;
+        }
+    }
+    statusList.value = newList;
+}
+
+// 渲染函数
+const renderSpin = () => {
+    const len = statusList.value.length;
+    return statusList.value.map((opacity, index) => ({
+        opacity,
+        transform: `rotate(${index / len}turn)`,
+        width: `${props.stroke}px`,
+        backgroundColor: props.color,
+        borderRadius: props.filleted ? `${props.stroke}px` : undefined,
+    }));
+};
+
+const renderDot = () => {
+    return statusList.value.map(opacity => ({
+        opacity,
+        backgroundColor: props.color,
+    }));
+};
+
+// 计算样式
+const loadingStyle = computed(() => {
+    const circleStyle = isOneOf(props.type, ['circle', 'arc'])
+        ? {
+              width: `${circleSize.value}px`,
+              height: `${circleSize.value}px`,
+          }
+        : {};
+    return getStyleWithVendor({
+        animationDuration: `${props.duration}ms`,
+        ...circleStyle,
+        ...(props.style || {}),
+    });
+});
+
+// 生命周期
+onMounted(() => {
+    initStatusList();
+    startAnimation();
+});
+
+onUnmounted(() => {
+    stopAnimation();
+});
+
+// 监听器
+watch([() => props.list, () => props.type], () => {
+    stopAnimation();
+    initStatusList();
+    startAnimation();
+});
+
+watch([() => props.type, () => statusList.value, () => props.duration], () => {
+    stopAnimation();
+    startAnimation();
+});
+</script>
+
+<template>
+    <div :class="[`${prefix}`, 'all-border-box', props.type, props.class]" :style="loadingStyle">
+        <!-- Spin 类型 -->
+        <template v-if="props.type === 'spin'">
+            <span
+                v-for="(item, index) in renderSpin()"
+                :key="index"
+                class="spin-cell"
+                :style="{
+                    opacity: item.opacity,
+                    transform: item.transform,
+                    width: item.width,
+                }"
+            >
+                <span
+                    class="spin-cell-inner bg-color-with-config"
+                    :style="{
+                        backgroundColor: item.backgroundColor,
+                        borderRadius: item.borderRadius,
+                    }"
+                />
+            </span>
+        </template>
+
+        <!-- Dot 类型 -->
+        <template v-if="props.type === 'dot'">
+            <span
+                v-for="(item, index) in renderDot()"
+                :key="index"
+                :class="['dot-cell', 'bg-color-with-config', { filleted: props.filleted }]"
+                :style="{
+                    opacity: item.opacity,
+                    backgroundColor: item.backgroundColor,
+                }"
+            />
+        </template>
+
+        <!-- Circle 类型 -->
+        <template v-if="props.type === 'circle'">
+            <svg :viewBox="`0 0 ${circleSize} ${circleSize}`">
+                <defs>
+                    <linearGradient :id="`grad1-${actualSvgKey}`" x1="0%" y1="0%" x2="100%" y2="0%">
+                        <stop
+                            offset="0%"
+                            class="loading-circle-middle stop-color-with-config"
+                            :style="{ stopColor: props.color }"
+                        />
+                        <stop
+                            offset="100%"
+                            class="loading-circle-start stop-color-with-config"
+                            :style="{ stopColor: props.color }"
+                        />
+                    </linearGradient>
+                    <linearGradient :id="`grad2-${actualSvgKey}`" x1="0%" y1="0%" x2="100%" y2="0%">
+                        <stop
+                            offset="0%"
+                            class="loading-circle-middle stop-color-with-config"
+                            :style="{ stopColor: props.color }"
+                        />
+                        <stop
+                            offset="100%"
+                            class="loading-circle-end stop-color-with-config"
+                            :style="{ stopColor: props.color }"
+                        />
+                    </linearGradient>
+                </defs>
+                <circle
+                    :cx="circlePos"
+                    :cy="circlePos"
+                    :r="props.radius"
+                    :stroke="`url(#grad1-${actualSvgKey})`"
+                    :stroke-width="props.stroke"
+                    :stroke-dasharray="halfCircle"
+                    :stroke-dashoffset="halfCircle"
+                    fill="none"
+                />
+                <circle
+                    :cx="circlePos"
+                    :cy="circlePos"
+                    :r="props.radius"
+                    :stroke="`url(#grad2-${actualSvgKey})`"
+                    :stroke-width="props.stroke"
+                    :stroke-dasharray="halfCircle"
+                    fill="none"
+                />
+                <circle
+                    v-if="props.filleted"
+                    :cx="circlePos * 2 - props.stroke / 2"
+                    :cy="circlePos"
+                    :r="props.stroke / 2"
+                    class="loading-circle-filleted fill-color-with-config"
+                    :style="{ fill: props.color }"
+                />
+            </svg>
+        </template>
+
+        <!-- Arc 类型 -->
+        <template v-if="props.type === 'arc'">
+            <svg :viewBox="`0 0 ${circleSize} ${circleSize}`">
+                <circle
+                    class="arc-bg"
+                    :cx="circlePos"
+                    :cy="circlePos"
+                    :r="props.radius"
+                    :stroke-width="props.stroke"
+                    fill="none"
+                />
+                <circle
+                    class="arc-line stroke-color-with-config"
+                    :cx="circlePos"
+                    :cy="circlePos"
+                    :r="props.radius"
+                    :style="{ stroke: props.color }"
+                    :stroke-width="props.stroke"
+                    :stroke-dashoffset="halfCircle * 0.5"
+                    :stroke-dasharray="`${halfCircle * 0.5} ${halfCircle * 1.5}`"
+                    fill="none"
+                    :stroke-linecap="props.filleted ? 'round' : undefined"
+                />
+            </svg>
+        </template>
+    </div>
+</template>
diff --git a/packages/arcodesign-vue/components/loading/README.en-US.md b/packages/arcodesign-vue/components/loading/README.en-US.md
new file mode 100644
index 00000000..785253ee
--- /dev/null
+++ b/packages/arcodesign-vue/components/loading/README.en-US.md
@@ -0,0 +1,36 @@
+<!-- Note: Generated by AI, needs verification -->
+
+### Feedback
+
+# Loading
+
+Loading component, divided into four types, `circle` is a ring, `arc` is an arc `spin` is a rotation, and `dot` is a dot. All types can be customized in color, ring and arc types can be customized with coil radius and thickness, and rotation and dot types can be customized with internal element transparency.
+
+======
+
+> Props
+
+| Property | Description                                                                                                                      | Type                                 | DefaultValue |
+| -------- | -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ |
+| style    | Custom stylesheet                                                                                                                | CSSProperties                        | -            |
+| class    | Custom classname                                                                                                                 | string                               | -            |
+| color    | The main color, if you want to use css to control the main color, you can use the public mixin \`\.set\-loading\-color(@color)\` | string                               | -            |
+| type     | Loading type                                                                                                                     | "spin" \| "circle" \| "arc" \| "dot" | "dot"        |
+| list     | Valid when the type is \`dot\` or \`spin\`, defines the transparency of each element inside                                      | number\[\]                           | -            |
+| duration | A loading cycle in millisecond                                                                                                   | number                               | 1000         |
+| svgKey   | Distinguish the \`\<def\>\` content of different svg                                                                             | string                               | -            |
+| radius   | Circle radius, available when type is \`circle\` or \`arc\`                                                                      | number                               | 9            |
+| stroke   | Circle stroke width, available when type is \`circle\` or \`arc\` or \`spin\`                                                    | number                               | 2            |
+| filleted | Whether the edges are rounded                                                                                                    | boolean                              | true         |
+
+> Refs
+
+| Property | Description               | Type           |
+| -------- | ------------------------- | -------------- |
+| dom      | The outermost element DOM | HTMLDivElement |
+
+> LoadingType
+
+```
+"spin" | "circle" | "arc" | "dot"
+```
diff --git a/packages/arcodesign-vue/components/loading/README.md b/packages/arcodesign-vue/components/loading/README.md
new file mode 100644
index 00000000..6a97ae83
--- /dev/null
+++ b/packages/arcodesign-vue/components/loading/README.md
@@ -0,0 +1,36 @@
+<!-- Note: Generated by AI, needs verification -->
+
+### 反馈
+
+# 加载 Loading
+
+加载中组件，分为四种类型，`circle`为环形，`arc`为弧线，`spin`为旋转，`dot`为圆点。所有类型均可定制颜色，环形和弧线类型可定制线圈半径及粗细，旋转和圆点类型可定制内部元素透明度。
+
+======
+
+> 属性/Props
+
+| 参数     | 描述                                                                                  | 类型                                 | 默认值 |
+| -------- | ------------------------------------------------------------------------------------- | ------------------------------------ | ------ |
+| style    | 自定义样式                                                                            | CSSProperties                        | -      |
+| class    | 自定义类名                                                                            | string                               | -      |
+| color    | 主颜色，如果想使用 css 控制主颜色，可使用公共 mixin \`\.set\-loading\-color(@color)\` | string                               | -      |
+| type     | loading 类型                                                                          | "spin" \| "circle" \| "arc" \| "dot" | "dot"  |
+| list     | 当类型为\`dot\`或\`spin\`时有效，定义内部各元素的透明度                               | number\[\]                           | -      |
+| duration | 一次 loading 周期的毫秒数                                                             | number                               | 1000   |
+| svgKey   | 区分不同 loading 组件间的\`\<def\>\`内容                                              | string                               | -      |
+| radius   | 圆圈半径，类型为\`circle\`或\`arc\`时可用                                             | number                               | 9      |
+| stroke   | 圆圈描边宽度，类型为\`circle\`或\`arc\`或\`spin\`时可用                               | number                               | 2      |
+| filleted | 边缘是否为圆角                                                                        | boolean                              | true   |
+
+> 引用/Refs
+
+| 参数 | 描述           | 类型           |
+| ---- | -------------- | -------------- |
+| dom  | 最外层元素 DOM | HTMLDivElement |
+
+> LoadingType
+
+```
+"spin" | "circle" | "arc" | "dot"
+```
diff --git a/packages/arcodesign-vue/components/loading/__demo__/custom-color.md b/packages/arcodesign-vue/components/loading/__demo__/custom-color.md
new file mode 100644
index 00000000..63965a77
--- /dev/null
+++ b/packages/arcodesign-vue/components/loading/__demo__/custom-color.md
@@ -0,0 +1,27 @@
+<!-- Note: Generated by AI, needs verification -->
+
+## 自定义加载颜色/透明度 @en{Custom loading color/transparent}
+
+#### 3
+
+旋转和圆点类型可定制内部元素透明度。@en{Inner element transparency of spin and dot types can be customized.}
+
+```vue
+<template>
+    <div class="loading-demo-basic">
+        <arco-loading type="arc" color="#ff5722" />
+        <arco-loading type="circle" color="#ff5722" />
+        <arco-loading type="spin" color="#ff5722" :list="[1, 0, 0.1, 0.25, 0.4, 0.55, 0.7, 0.85]" />
+        <arco-loading type="dot" color="#606a78" :list="[0.1, 0.3, 0.5]" />
+    </div>
+</template>
+```
+
+```less
+.loading-demo-basic {
+    .@{prefix}-loading {
+        .rem(margin-right, 20);
+        vertical-align: middle;
+    }
+}
+```
diff --git a/packages/arcodesign-vue/components/loading/__demo__/custom-size.md b/packages/arcodesign-vue/components/loading/__demo__/custom-size.md
new file mode 100644
index 00000000..27f3a083
--- /dev/null
+++ b/packages/arcodesign-vue/components/loading/__demo__/custom-size.md
@@ -0,0 +1,26 @@
+<!-- Note: Generated by AI, needs verification -->
+
+## 自定义加载大小/粗细 @en{Custom loading size/thickness}
+
+#### 2
+
+环形和弧线类型可定制线圈半径及粗细。 @en{ The coil radius and thickness of circle and arc types can be customized.}
+
+```vue
+<template>
+    <div class="loading-demo-basic">
+        <arco-loading type="arc" :radius="7" />
+        <arco-loading type="circle" :radius="15" :stroke="1" />
+        <arco-loading type="spin" :stroke="1" />
+    </div>
+</template>
+```
+
+```less
+.loading-demo-basic {
+    .@{prefix}-loading {
+        .rem(margin-right, 20);
+        vertical-align: middle;
+    }
+}
+```
diff --git a/packages/arcodesign-vue/components/loading/__demo__/filleted.md b/packages/arcodesign-vue/components/loading/__demo__/filleted.md
new file mode 100644
index 00000000..45689efe
--- /dev/null
+++ b/packages/arcodesign-vue/components/loading/__demo__/filleted.md
@@ -0,0 +1,25 @@
+<!-- Note: Generated by AI, needs verification -->
+
+## 去除圆角 @en{No fillet}
+
+#### 4
+
+```vue
+<template>
+    <div class="loading-demo-basic">
+        <arco-loading type="arc" :filleted="false" />
+        <arco-loading type="circle" :filleted="false" />
+        <arco-loading type="spin" :filleted="false" />
+        <arco-loading type="dot" :filleted="false" />
+    </div>
+</template>
+```
+
+```less
+.loading-demo-basic {
+    .@{prefix}-loading {
+        .rem(margin-right, 20);
+        vertical-align: middle;
+    }
+}
+```
diff --git a/packages/arcodesign-vue/components/loading/__demo__/index.md b/packages/arcodesign-vue/components/loading/__demo__/index.md
new file mode 100644
index 00000000..d0c1848f
--- /dev/null
+++ b/packages/arcodesign-vue/components/loading/__demo__/index.md
@@ -0,0 +1,25 @@
+<!-- Note: Generated by AI, needs verification -->
+
+## 基础用法 @en{Basic Usage}
+
+#### 1
+
+```vue
+<template>
+    <div class="loading-demo-basic">
+        <arco-loading type="arc" />
+        <arco-loading type="circle" />
+        <arco-loading type="spin" />
+        <arco-loading type="dot" />
+    </div>
+</template>
+```
+
+```less
+.loading-demo-basic {
+    .@{prefix}-loading {
+        .rem(margin-right, 20);
+        vertical-align: middle;
+    }
+}
+```
diff --git a/packages/arcodesign-vue/components/loading/index.ts b/packages/arcodesign-vue/components/loading/index.ts
new file mode 100644
index 00000000..5d2e950a
--- /dev/null
+++ b/packages/arcodesign-vue/components/loading/index.ts
@@ -0,0 +1,11 @@
+// Note: Generated by AI, needs verification
+import Loading from './Loading.vue';
+import { installFactory } from '../_helpers/install';
+
+const install = installFactory(Loading);
+
+export { Loading };
+
+export default {
+    install,
+};
diff --git a/packages/arcodesign-vue/components/loading/style/index.less b/packages/arcodesign-vue/components/loading/style/index.less
new file mode 100644
index 00000000..43a29753
--- /dev/null
+++ b/packages/arcodesign-vue/components/loading/style/index.less
@@ -0,0 +1,99 @@
+// Note: Generated by AI, needs verification
+@import '../../../style/mixin.less';
+
+.@{prefix}-loading {
+    .set-loading-color-var(loading-color);
+    display: inline-block;
+    font-size: 0;
+    line-height: 0;
+    position: relative;
+    @keyframes changDeg {
+        0% {
+            transform: rotate(0deg);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    &.circle,
+    &.arc,
+    &.spin {
+        animation: changDeg 1s infinite linear;
+    }
+
+    &.circle {
+        .loading-circle-middle {
+            stop-opacity: 0.5;
+        }
+
+        .loading-circle-end {
+            stop-opacity: 0;
+        }
+    }
+
+    &.dot {
+        .dot-cell {
+            display: inline-block;
+            .use-var(width, loading-dot-size);
+            .use-var(height, loading-dot-size);
+            .use-var(margin-left, loading-dot-gutter);
+
+            &:first-of-type {
+                margin-left: 0;
+            }
+
+            &.filleted {
+                border-radius: 50%;
+            }
+        }
+    }
+
+    &.spin {
+        .rem(height, 22);
+        .rem(width, 22);
+        position: relative;
+
+        .spin-cell {
+            position: absolute;
+            .rem(left, 10);
+            .rem(top, 1);
+            display: inline-block;
+            .rem(height, 10);
+            .rem(padding-bottom, 4);
+            overflow: hidden;
+            transform-origin: 50% bottom;
+
+            &-inner {
+                display: inline-block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 200%;
+                transform: scale(0.5);
+                transform-origin: top left;
+                .rem(height, 12);
+            }
+        }
+    }
+
+    &.arc {
+        .arc-bg {
+            .use-var(stroke, loading-arc-background-color);
+        }
+    }
+
+    &.line {
+        width: 100%;
+
+        .loading-line-start,
+        .loading-line-end {
+            .use-var(stop-color, loading-color);
+        }
+
+        .loading-line-start {
+            stop-opacity: 0;
+        }
+    }
+}
diff --git a/packages/arcodesign-vue/components/loading/style/index.ts b/packages/arcodesign-vue/components/loading/style/index.ts
new file mode 100644
index 00000000..b7d76bc9
--- /dev/null
+++ b/packages/arcodesign-vue/components/loading/style/index.ts
@@ -0,0 +1,3 @@
+// Note: Generated by AI, needs verification
+import '../../../style/public.less';
+import './index.less';
diff --git a/packages/arcodesign-vue/components/loading/type.ts b/packages/arcodesign-vue/components/loading/type.ts
new file mode 100644
index 00000000..f58b64bb
--- /dev/null
+++ b/packages/arcodesign-vue/components/loading/type.ts
@@ -0,0 +1,70 @@
+// Note: Generated by AI, needs verification
+import { CSSProperties } from 'vue';
+
+export type LoadingType = 'spin' | 'circle' | 'arc' | 'dot';
+
+export interface LoadingProps {
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    class?: string;
+    /**
+     * 主颜色，如果想使用 css 控制主颜色，可使用公共 mixin `.set-loading-color(@color)`
+     * @en The main color, if you want to use css to control the main color, you can use the public mixin `.set-loading-color(@color)`
+     */
+    color?: string;
+    /**
+     * loading类型
+     * @en Loading type
+     * @default "dot"
+     */
+    type?: LoadingType;
+    /**
+     * 当类型为`dot`或`spin`时有效，定义内部各元素的透明度
+     * @en Valid when the type is `dot` or `spin`, defines the transparency of each element inside
+     */
+    list?: number[];
+    /**
+     * 一次loading周期的毫秒数
+     * @en A loading cycle in millisecond
+     * @default 1000
+     */
+    duration?: number;
+    /**
+     * 区分不同loading组件间的`<def>`内容
+     * @en Distinguish the `<def>` content of different svg
+     */
+    svgKey?: string;
+    /**
+     * 圆圈半径，类型为`circle`或`arc`时可用
+     * @en Circle radius, available when type is `circle` or `arc`
+     * @default 9
+     */
+    radius?: number;
+    /**
+     * 圆圈描边宽度，类型为`circle`或`arc`或`spin`时可用
+     * @en Circle stroke width, available when type is `circle` or `arc` or `spin`
+     * @default 2
+     */
+    stroke?: number;
+    /**
+     * 边缘是否为圆角
+     * @en Whether the edges are rounded
+     * @default true
+     */
+    filleted?: boolean;
+}
+
+export interface LoadingRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
diff --git a/packages/arcodesign-vue/components/style.ts b/packages/arcodesign-vue/components/style.ts
index 49306c78..352b81c4 100644
--- a/packages/arcodesign-vue/components/style.ts
+++ b/packages/arcodesign-vue/components/style.ts
@@ -2,5 +2,6 @@ import '../style/public.less';
 import './badge/style';
 import './cell/style';
 import './context-provider/style';
+import './loading/style';
 import './notify/style';
 import './transition/style';