diff --git a/packages/opendesign/src/progress/__demo__/ProgressBasic.vue b/packages/opendesign/src/progress/__demo__/ProgressBasic.vue
index a09ca187f99197bab748fefc11740d7901740bb2..b2298b9fa82203db86d15039f87443ab5fb4865f 100644
--- a/packages/opendesign/src/progress/__demo__/ProgressBasic.vue
+++ b/packages/opendesign/src/progress/__demo__/ProgressBasic.vue
@@ -9,11 +9,19 @@ import { OIconAdd, OIconMinus } from '../../icon-components';
 
 const val = ref(10);
 const increaseVal = () => {
-  val.value += 10;
+  if (val.value <= 90) {
+    val.value += 10;
+  } else {
+    val.value = 100;
+  }
 };
 
 const decreaseVal = () => {
-  val.value -= 10;
+  if (val.value >= 10) {
+    val.value -= 10;
+  } else {
+    val.value = 0;
+  }
 };
 </script>
 
diff --git a/packages/opendesign/src/progress/__demo__/ProgressCircle.vue b/packages/opendesign/src/progress/__demo__/ProgressCircle.vue
index 2fbe94991097af5d9f60a0f942b5d21d0bbb15f9..ef4ba2fc9d5ee79d6fe102db1c687ee47d3fbb24 100644
--- a/packages/opendesign/src/progress/__demo__/ProgressCircle.vue
+++ b/packages/opendesign/src/progress/__demo__/ProgressCircle.vue
@@ -10,11 +10,19 @@ import { OIconWarning } from '../../icon-components';
 
 const val = ref(60);
 const increaseVal = () => {
-  val.value += 10;
+  if (val.value <= 90) {
+    val.value += 10;
+  } else {
+    val.value = 100;
+  }
 };
 
 const decreaseVal = () => {
-  val.value -= 10;
+  if (val.value >= 10) {
+    val.value -= 10;
+  } else {
+    val.value = 0;
+  }
 };
 </script>
 
diff --git a/packages/opendesign/src/progress/__demo__/ProgressColor.vue b/packages/opendesign/src/progress/__demo__/ProgressColor.vue
index d55e3edf47511924b3997d0babaaf15f67ba8c46..8d8b9120326d18dfa11cfefea7a2907105e406a3 100644
--- a/packages/opendesign/src/progress/__demo__/ProgressColor.vue
+++ b/packages/opendesign/src/progress/__demo__/ProgressColor.vue
@@ -9,11 +9,19 @@ import { OIconAdd, OIconMinus } from '../../icon-components';
 
 const val = ref(60);
 const increaseVal = () => {
-  val.value += 10;
+  if (val.value <= 90) {
+    val.value += 10;
+  } else {
+    val.value = 100;
+  }
 };
 
 const decreaseVal = () => {
-  val.value -= 10;
+  if (val.value >= 10) {
+    val.value -= 10;
+  } else {
+    val.value = 0;
+  }
 };
 </script>
 
diff --git a/packages/opendesign/src/progress/__demo__/ProgressCustom.vue b/packages/opendesign/src/progress/__demo__/ProgressCustom.vue
index 92870bf4a44cadbfc427f50578d4ffc74f957aa8..9febc2f60b5a828f25f0a56c49306186b7c4eec1 100644
--- a/packages/opendesign/src/progress/__demo__/ProgressCustom.vue
+++ b/packages/opendesign/src/progress/__demo__/ProgressCustom.vue
@@ -11,11 +11,19 @@ import { OIconWarning } from '../../icon-components';
 const val = ref(10);
 
 const increaseVal = () => {
-  val.value += 10;
+  if (val.value <= 90) {
+    val.value += 10;
+  } else {
+    val.value = 100;
+  }
 };
 
 const decreaseVal = () => {
-  val.value -= 10;
+  if (val.value >= 10) {
+    val.value -= 10;
+  } else {
+    val.value = 0;
+  }
 };
 
 const format = (percentage: number) => {
diff --git a/packages/opendesign/src/progress/__demo__/ProgressLabelInside.vue b/packages/opendesign/src/progress/__demo__/ProgressLabelInside.vue
index c7950a48996b356d72b73d18b4608fcf4170bea3..c70bd2a391a57c4250ece5bb403ea8bda7c1117d 100644
--- a/packages/opendesign/src/progress/__demo__/ProgressLabelInside.vue
+++ b/packages/opendesign/src/progress/__demo__/ProgressLabelInside.vue
@@ -9,11 +9,19 @@ import { OIconAdd, OIconMinus } from '../../icon-components';
 
 const val = ref(30);
 const increaseVal = () => {
-  val.value += 10;
+  if (val.value <= 90) {
+    val.value += 10;
+  } else {
+    val.value = 100;
+  }
 };
 
 const decreaseVal = () => {
-  val.value -= 10;
+  if (val.value >= 10) {
+    val.value -= 10;
+  } else {
+    val.value = 0;
+  }
 };
 </script>
 
diff --git a/packages/opendesign/src/progress/__demo__/ProgressStrokeWidth.vue b/packages/opendesign/src/progress/__demo__/ProgressStrokeWidth.vue
index 99087ade22f29a9f460e62725e37267462935398..3263017d68507c80507935b273f483f54117efcb 100644
--- a/packages/opendesign/src/progress/__demo__/ProgressStrokeWidth.vue
+++ b/packages/opendesign/src/progress/__demo__/ProgressStrokeWidth.vue
@@ -9,11 +9,19 @@ import { OIconAdd, OIconMinus } from '../../icon-components';
 
 const val = ref(60);
 const increaseVal = () => {
-  val.value += 10;
+  if (val.value <= 90) {
+    val.value += 10;
+  } else {
+    val.value = 100;
+  }
 };
 
 const decreaseVal = () => {
-  val.value -= 10;
+  if (val.value >= 10) {
+    val.value -= 10;
+  } else {
+    val.value = 0;
+  }
 };
 </script>
 
@@ -36,9 +44,9 @@ const decreaseVal = () => {
 
     <div :style="{ display: 'flex', gap: '16px', flexWrap: 'wrap' }">
       <OProgress :percentage="val" color="primary" variant="circle" :track-width="200" :stroke-width="20" />
-      <OProgress :percentage="val" color="success" variant="circle" :track-width="200" :stroke-width="20" />
-      <OProgress :percentage="val" color="warning" variant="circle" :track-width="200" :stroke-width="20" />
-      <OProgress :percentage="val" color="danger" variant="circle" :track-width="200" :stroke-width="20" />
+      <OProgress :percentage="val + 10" color="success" variant="circle" :track-width="200" :stroke-width="20" />
+      <OProgress :percentage="val + 15" color="warning" variant="circle" :track-width="200" :stroke-width="20" />
+      <OProgress :percentage="val + 20" color="danger" variant="circle" :track-width="200" :stroke-width="20" />
     </div>
   </section>
 </template>