diff --git a/packages/opendesign/src/components/progress/OProgress.vue b/packages/opendesign/src/components/progress/OProgress.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0648efbd86552575b4da870f70a8358b93aed6e6
--- /dev/null
+++ b/packages/opendesign/src/components/progress/OProgress.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { isNumber } from '../_shared/is';
+import { progressProps } from './types';
+
+const props = defineProps(progressProps);
+
+const lineHeight = computed(() => (isNumber(props.strokeWidth) ? `${props.strokeWidth}px` : props.strokeWidth));
+
+const lineBarStyle = computed(() => {
+  return {
+    width: `${props.percentage}%`,
+    borderRadius: lineHeight.value,
+  };
+});
+
+const lineTrackStyle = computed(() => {
+  return {
+    height: lineHeight.value,
+    borderRadius: lineHeight.value,
+  };
+});
+
+const label = computed(() => props.format(props.percentage));
+
+const DEFAULT_CIRCLE_SIZE = 80;
+
+// 圆直径
+const circleDiameter = computed(() => props.width ?? DEFAULT_CIRCLE_SIZE);
+
+// 圆中心
+const circleCenter = computed(() => circleDiameter.value / 2);
+
+// 圆半径
+const circleRadius = computed(() => circleCenter.value - props.strokeWidth / 2);
+
+// 圆进度
+const circleStrokeDashArr = computed(() => {
+  const perimeter = 2 * Math.PI * circleRadius.value;
+  const percent = props.percentage / 100;
+  return `${perimeter * percent}  ${perimeter * (1 - percent)}`;
+});
+</script>
+
+<template>
+  <div class="o-progress" :class="[`o-progress-${props.variant}`, `o-progress-${props.color}`]">
+    <!-- variant === 'line' -->
+    <div v-if="props.variant === 'line'" class="o-progress-line-wrap">
+      <div class="o-progress-line-track" :style="lineTrackStyle">
+        <div class="o-progress-line-bar" :style="lineBarStyle">
+          <div v-if="props.showLabel && props.labelInside" class="o-progress-line-inner-label">
+            <slot :percentage="props.percentage">
+              {{ label }}
+            </slot>
+          </div>
+        </div>
+      </div>
+      <div v-if="props.showLabel && !props.labelInside" class="o-progress-line-label">
+        <slot :percentage="props.percentage">
+          {{ label }}
+        </slot>
+      </div>
+    </div>
+    <!-- variant === circle -->
+    <div v-if="props.variant === 'circle'" class="o-progress-circle-wrap">
+      <svg :width="circleDiameter" :height="circleDiameter" :view-box="`0 0 ${circleDiameter} ${circleDiameter}`">
+        <circle class="o-progress-circle-track" fill="none" :cx="circleCenter" :cy="circleCenter" :r="circleRadius" :stroke-width="props.strokeWidth" />
+        <circle
+          class="o-progress-circle-bar"
+          fill="none"
+          :cx="circleCenter"
+          :cy="circleCenter"
+          :r="circleRadius"
+          :stroke-width="props.strokeWidth"
+          stroke-linecap="round"
+          :transform="`matrix(0,-1,1,0,0,${circleDiameter})`"
+          :stroke-dasharray="circleStrokeDashArr"
+        />
+      </svg>
+      <div v-if="props.showLabel" class="o-progress-circle-label">
+        <slot :percentage="props.percentage">
+          {{ label }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/progress/__demo__/IndexProgress.vue b/packages/opendesign/src/components/progress/__demo__/IndexProgress.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8755ff61e6bd3163d0343ce43d068a6924745afe
--- /dev/null
+++ b/packages/opendesign/src/components/progress/__demo__/IndexProgress.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import '../style';
+import ProgressBasic from './ProgressBasic.vue';
+import ProgressColor from './ProgressColor.vue';
+import ProgressCustom from './ProgressCustom.vue';
+import ProgressCircle from './ProgressCircle.vue';
+import ProgressStrokeWidth from './ProgressStrokeWidth.vue';
+import ProgressLabelInside from './ProgressLabelInside.vue';
+</script>
+
+<template>
+  <div class="page-demo">
+    <ProgressBasic />
+    <ProgressCustom />
+    <ProgressColor />
+    <ProgressCircle />
+    <ProgressStrokeWidth />
+    <ProgressLabelInside />
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressBasic.vue b/packages/opendesign/src/components/progress/__demo__/ProgressBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..646d97d645af5b711bcba881bd830cf3fe4db11f
--- /dev/null
+++ b/packages/opendesign/src/components/progress/__demo__/ProgressBasic.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { OProgress } from '../index';
+
+import '../../button/style';
+import { OButton } from '../../button';
+import { IconAdd, IconMinus } from '../../icons';
+
+const val = ref(10);
+const increaseVal = () => {
+  val.value += 10;
+};
+
+const decreaseVal = () => {
+  val.value -= 10;
+};
+</script>
+
+<template>
+  <h4>基础用法</h4>
+  <section>
+    <div class="progress-btn">
+      <OButton color="primary" size="small" @click="increaseVal">
+        <IconAdd />
+      </OButton>
+      <OButton color="primary" size="small" @click="decreaseVal">
+        <IconMinus />
+      </OButton>
+    </div>
+    <OProgress :percentage="val" :width="200" :style="{ width: '300px' }" />
+    <OProgress :percentage="val" :width="200" :style="{ width: '300px' }" :show-label="false"/>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+section {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.progress-btn {
+  .o-btn + .o-btn {
+    margin-left: 8px;
+  }
+}
+</style>
diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressCircle.vue b/packages/opendesign/src/components/progress/__demo__/ProgressCircle.vue
new file mode 100644
index 0000000000000000000000000000000000000000..664f662fa08fd23ca36c39410f95ffc065eb5d2d
--- /dev/null
+++ b/packages/opendesign/src/components/progress/__demo__/ProgressCircle.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { OProgress } from '../index';
+
+import '../../button/style';
+import { OButton } from '../../button';
+import { IconAdd, IconMinus } from '../../icons';
+
+const val = ref(60);
+const increaseVal = () => {
+  val.value += 10;
+};
+
+const decreaseVal = () => {
+  val.value -= 10;
+};
+</script>
+
+<template>
+  <h4>环形进度条</h4>
+  <section class="progress-container">
+    <div class="progress-btn">
+      <OButton color="primary" size="small" @click="increaseVal">
+        <IconAdd />
+      </OButton>
+      <OButton color="primary" size="small" @click="decreaseVal">
+        <IconMinus />
+      </OButton>
+    </div>
+
+    <div :style="{ display: 'flex', gap: '16px', flexWrap: 'wrap' }">
+      <OProgress :percentage="val" color="primary" variant="circle" :width="120" />
+      <OProgress :percentage="val" color="success" variant="circle" :width="120" />
+      <OProgress :percentage="val" color="warning" variant="circle" :width="120" />
+      <OProgress :percentage="val" color="danger" variant="circle" :width="120" />
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.progress-container {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.progress-btn {
+  .o-btn + .o-btn {
+    margin-left: 8px;
+  }
+}
+
+.o-progress + .o-progress {
+  margin-left: 20px;
+}
+</style>
diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressColor.vue b/packages/opendesign/src/components/progress/__demo__/ProgressColor.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ff2b4e677200b9ba8d01cb6c3e4f379e039c78b5
--- /dev/null
+++ b/packages/opendesign/src/components/progress/__demo__/ProgressColor.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { OProgress } from '../index';
+
+import '../../button/style';
+import { OButton } from '../../button';
+import { IconAdd, IconMinus } from '../../icons';
+
+const val = ref(60);
+const increaseVal = () => {
+  val.value += 10;
+};
+
+const decreaseVal = () => {
+  val.value -= 10;
+};
+</script>
+
+<template>
+  <h4>自定义颜色</h4>
+  <section>
+    <div class="progress-btn">
+      <OButton color="primary" size="small" @click="increaseVal">
+        <IconAdd />
+      </OButton>
+      <OButton color="primary" size="small" @click="decreaseVal">
+        <IconMinus />
+      </OButton>
+    </div>
+
+    <OProgress :percentage="val" color="primary" :style="{ width: '300px' }" />
+    <OProgress :percentage="val" color="success" :style="{ width: '300px' }" />
+    <OProgress :percentage="val" color="warning" :style="{ width: '300px' }" />
+    <OProgress :percentage="val" color="danger" :style="{ width: '300px' }" />
+  </section>
+</template>
+
+<style lang="scss" scoped>
+section {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.progress-btn {
+  .o-btn + .o-btn {
+    margin-left: 8px;
+  }
+}
+</style>
diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressCustom.vue b/packages/opendesign/src/components/progress/__demo__/ProgressCustom.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1ca0bdb1897de528a2366ba43c93a0ecbc974939
--- /dev/null
+++ b/packages/opendesign/src/components/progress/__demo__/ProgressCustom.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { OProgress } from '../index';
+
+import '../../button/style';
+import { OButton } from '../../button';
+import { IconAdd, IconMinus } from '../../icons';
+
+const val = ref(10);
+
+const increaseVal = () => {
+  val.value += 10;
+};
+
+const decreaseVal = () => {
+  val.value -= 10;
+};
+
+const format = (percentage: number) => {
+  return `进度${percentage}%`;
+};
+</script>
+
+<template>
+  <h4>自定义文字</h4>
+
+  <section class="progress-container">
+    <div class="progress-btn">
+      <OButton color="primary" size="small" @click="increaseVal">
+        <IconAdd />
+      </OButton>
+      <OButton color="primary" size="small" @click="decreaseVal">
+        <IconMinus />
+      </OButton>
+    </div>
+
+    <section>
+      <div>
+        <p>Format</p>
+        <section>
+          <OProgress :percentage="val" :format="format" :style="{ width: '400px' }" />
+        </section>
+      </div>
+      <div>
+        <p>插槽</p>
+        <section>
+          <OProgress :percentage="val" :style="{ width: '400px' }">
+            <template #default="{ percentage }">
+              {{ `content ${percentage}` }}
+            </template>
+          </OProgress>
+        </section>
+      </div>
+    </section>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.progress-container {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.progress-btn {
+  .o-btn + .o-btn {
+    margin-left: 8px;
+  }
+}
+</style>
diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressLabelInside.vue b/packages/opendesign/src/components/progress/__demo__/ProgressLabelInside.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3feb2eb169be42bc05ea3ba15b3be891bad0a3c7
--- /dev/null
+++ b/packages/opendesign/src/components/progress/__demo__/ProgressLabelInside.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { OProgress } from '../index';
+
+import '../../button/style';
+import { OButton } from '../../button';
+import { IconAdd, IconMinus } from '../../icons';
+
+const val = ref(30);
+const increaseVal = () => {
+  val.value += 10;
+};
+
+const decreaseVal = () => {
+  val.value -= 10;
+};
+</script>
+
+<template>
+  <h4>文字在进度条内部</h4>
+  <section>
+    <div class="progress-btn">
+      <OButton color="primary" @click="increaseVal">
+        <IconAdd />
+      </OButton>
+      <OButton color="primary" @click="decreaseVal">
+        <IconMinus />
+      </OButton>
+    </div>
+
+    <OProgress :percentage="val" color="primary" :style="{ width: '300px' }" :stroke-width="24" label-inside />
+  </section>
+</template>
+
+<style lang="scss" scoped>
+section {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.progress-btn {
+  .o-btn + .o-btn {
+    margin-left: 8px;
+  }
+}
+</style>
diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressStrokeWidth.vue b/packages/opendesign/src/components/progress/__demo__/ProgressStrokeWidth.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a0ba5f0603589c8a61e4eed8f8c75022c678a15b
--- /dev/null
+++ b/packages/opendesign/src/components/progress/__demo__/ProgressStrokeWidth.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { OProgress } from '../index';
+
+import '../../button/style';
+import { OButton } from '../../button';
+import { IconAdd, IconMinus } from '../../icons';
+
+const val = ref(60);
+const increaseVal = () => {
+  val.value += 10;
+};
+
+const decreaseVal = () => {
+  val.value -= 10;
+};
+</script>
+
+<template>
+  <h4>自定义线宽</h4>
+  <section>
+    <div class="progress-btn">
+      <OButton color="primary" @click="increaseVal">
+        <IconAdd />
+      </OButton>
+      <OButton color="primary" @click="decreaseVal">
+        <IconMinus />
+      </OButton>
+    </div>
+
+    <OProgress :percentage="val" color="primary" :stroke-width="20" />
+    <OProgress :percentage="val + 10" color="success" :stroke-width="20" />
+    <OProgress :percentage="val + 15" color="warning" :stroke-width="20" />
+    <OProgress :percentage="val + 20" color="danger" :stroke-width="20" />
+
+    <div :style="{ display: 'flex', gap: '16px', flexWrap: 'wrap' }">
+      <OProgress :percentage="val" color="primary" variant="circle" :width="200" :stroke-width="20" />
+      <OProgress :percentage="val" color="success" variant="circle" :width="200" :stroke-width="20" />
+      <OProgress :percentage="val" color="warning" variant="circle" :width="200" :stroke-width="20" />
+      <OProgress :percentage="val" color="danger" variant="circle" :width="200" :stroke-width="20" />
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+section {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.progress-btn {
+  .o-btn + .o-btn {
+    margin-left: 8px;
+  }
+}
+</style>
diff --git a/packages/opendesign/src/components/progress/index.ts b/packages/opendesign/src/components/progress/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9d364fafd7349f9500ea525f3a225106093615f5
--- /dev/null
+++ b/packages/opendesign/src/components/progress/index.ts
@@ -0,0 +1,13 @@
+import type { App } from 'vue';
+
+import _OProgress from './OProgress.vue';
+
+const OProgress = Object.assign(_OProgress, {
+  install(app: App) {
+    app.component(_OProgress.name, _OProgress);
+  },
+});
+
+export * from './types';
+
+export { OProgress };
diff --git a/packages/opendesign/src/components/progress/style/index.scss b/packages/opendesign/src/components/progress/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ddbdd86f9f80845fc25b0b55f4a75a9d372dde6b
--- /dev/null
+++ b/packages/opendesign/src/components/progress/style/index.scss
@@ -0,0 +1,70 @@
+@use './var.scss';
+
+.o-progress-line {
+  width: 100%;
+}
+
+.o-progress-line-wrap {
+  display: flex;
+  align-items: center;
+}
+
+.o-progress-line-track {
+  width: 100%;
+  overflow: hidden;
+  background-color: var(--o-progress-track-bg-color);
+}
+
+.o-progress-line-bar {
+  max-width: 100%;
+  height: 100%;
+  background-color: var(--o-progress-bar-bg-color);
+  transition: all var(--o-duration-m1) var(--o-easing-standard);
+  text-align: right;
+
+}
+
+.o-progress-line-label {
+  color: var(--o-progress-color);
+  font-size: var(--o-progress-text-size);
+  line-height: var(--o-progress-text-height);
+  margin-left: 8px;
+  white-space: nowrap;
+}
+
+.o-progress-line-inner-label {
+  display: inline-block;
+  color: rgb(var(--o-color-white));
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.o-progress-circle {
+  font-size: 0;
+  line-height: 0;
+}
+
+.o-progress-circle-wrap {
+  position: relative;
+  display: inline-block;
+}
+
+.o-progress-circle-track {
+  stroke: var(--o-progress-track-bg-color);
+}
+
+.o-progress-circle-bar {
+  stroke: var(--o-progress-bar-bg-color);
+  transition: all var(--o-duration-m1) var(--o-easing-standard);
+}
+
+.o-progress-circle-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: var(--o-progress-color);
+  font-size: var(--o-progress-text-size);
+  line-height: var(--o-progress-text-height);
+}
diff --git a/packages/opendesign/src/components/progress/style/index.ts b/packages/opendesign/src/components/progress/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4513560262c6648e14e7da5a5f205185979a68f5
--- /dev/null
+++ b/packages/opendesign/src/components/progress/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
\ No newline at end of file
diff --git a/packages/opendesign/src/components/progress/style/var.scss b/packages/opendesign/src/components/progress/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e962777e841be3700483e09cf736195bf47a2d5d
--- /dev/null
+++ b/packages/opendesign/src/components/progress/style/var.scss
@@ -0,0 +1,22 @@
+.o-progress {
+  --o-progress-track-bg-color: var(--o-color-control1-light);
+  --o-progress-text-size: var(--o-font_size-text);
+  --o-progress-text-height: var(--o-font_size-text);
+  --o-progress-color: var(--o-color-info2);
+}
+
+.o-progress-primary {
+  --o-progress-bar-bg-color: var(--o-color-primary1);
+}
+
+.o-progress-success {
+  --o-progress-bar-bg-color: var(--o-color-success1);
+}
+
+.o-progress-warning {
+  --o-progress-bar-bg-color: var(--o-color-warning1);
+}
+
+.o-progress-danger {
+  --o-progress-bar-bg-color: var(--o-color-danger1);
+}
diff --git a/packages/opendesign/src/components/progress/types.ts b/packages/opendesign/src/components/progress/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b0cec2f395a74c9c67b28a2340213d6c59a7b9b9
--- /dev/null
+++ b/packages/opendesign/src/components/progress/types.ts
@@ -0,0 +1,71 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+import type { ColorT } from '../_shared/global';
+
+export type ProgressVariantT = 'line' | 'circle';
+
+export type ProgressColorT = 'primary' | 'success' | 'warning' | 'danger';
+
+export const progressProps = {
+  /**
+   * 进度条类型
+   * 'line' | 'circle'
+   */
+  variant: {
+    type: String as PropType<ProgressVariantT>,
+    default: 'line',
+  },
+  /**
+   * 进度条百分比
+   */
+  percentage: {
+    type: Number,
+    default: 0,
+    validator: (val: number): boolean => val >= 0 && val <= 100,
+  },
+  /**
+   * 进度条线宽
+   */
+  strokeWidth: {
+    type: Number,
+    default: 6,
+  },
+  /**
+   * 进度条颜色类型
+   * 'primary' | 'success' | 'warning' | 'danger'
+   */
+  color: {
+    type: String as PropType<ProgressColorT>,
+    default: 'primary',
+  },
+  /**
+   * 环形进度条尺寸
+   */
+  width: {
+    type: Number,
+    default: 80,
+  },
+  /**
+   * 格式化文字
+   */
+  format: {
+    type: Function as PropType<(percentage: number) => string>,
+    default: (percentage: number) => `${percentage}%`,
+  },
+  /**
+   * 是否展示文字
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 线形进度条，文字是否在进度条内部
+   */
+  labelInside: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type ProgressPropsT = ExtractPropTypes<typeof progressProps>;
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 7d7061daa4c4604931b870b4376128ea62e067f0..af82290c48b3872aaf9f309a28cca75741ddaf23 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -138,7 +138,13 @@ export const routes = [
     path: '/dropdown',
     name: 'ODropdown',
     label: '下拉菜单',
-    component: () => import('@components/dropdown/__demo__/IndexDropdown.vue')
+    component: () => import('@components/dropdown/__demo__/IndexDropdown.vue'),
+  },
+  {
+    path: '/progress',
+    name: 'Progress',
+    label: '进度条',
+    component: () => import('@components/progress/__demo__/IndexProgress.vue'),
   },
   {
     path: '/resize-observer',
@@ -157,7 +163,7 @@ export const routes = [
     name: 'ChildOnly',
     label: '只渲染一个子元素',
     component: () => import('@components/child-only/__demo__/IndexChildOnly.vue'),
-  }
+  },
 ];
 
 export const router = createRouter({