diff --git a/website/docs/en-US/progress.md b/website/docs/en-US/progress.md
index 13146e5893..5e830cda84 100644
--- a/website/docs/en-US/progress.md
+++ b/website/docs/en-US/progress.md
@@ -21,6 +21,22 @@ Progress is used to show the progress of current operation, and inform the user
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`);
+      return {
+        format,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -103,6 +119,55 @@ You can use `color` attr to set the progress bar color. it accepts color string,
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        percentage: 20,
+        customColor: '#409eff',
+        customColors: [
+          { color: '#f56c6c', percentage: 20 },
+          { color: '#e6a23c', percentage: 40 },
+          { color: '#5cb87a', percentage: 60 },
+          { color: '#1989fa', percentage: 80 },
+          { color: '#6f7ad3', percentage: 100 },
+        ],
+      });
+      const customColorMethod = (percentage) => {
+        if (percentage < 30) {
+          return '#909399';
+        } if (percentage < 70) {
+          return '#e6a23c';
+        }
+        return '#67c23a';
+      };
+      const increase = () => {
+        state.percentage += 10;
+        if (state.percentage > 100) {
+          state.percentage = 100;
+        }
+      };
+      const decrease = () => {
+        state.percentage -= 10;
+        if (state.percentage < 0) {
+          state.percentage = 0;
+        }
+      };
+      return {
+        ...toRefs(state),
+        customColorMethod,
+        increase,
+        decrease,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -170,6 +235,51 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs, onMounted } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        percentage: 10,
+        percentage2: 0,
+        colors: [
+          { color: '#f56c6c', percentage: 20 },
+          { color: '#e6a23c', percentage: 40 },
+          { color: '#5cb87a', percentage: 60 },
+          { color: '#1989fa', percentage: 80 },
+          { color: '#6f7ad3', percentage: 100 },
+        ],
+      });
+      const increase = () => {
+        state.percentage += 10;
+        if (state.percentage > 100) {
+          state.percentage = 100;
+        }
+      };
+      const decrease = () => {
+        state.percentage -= 10;
+        if (state.percentage < 0) {
+          state.percentage = 0;
+        }
+      };
+      onMounted(() => {
+        setInterval(() => {
+          state.percentage2 = (state.percentage2 % 100) + 10
+        }, 500)
+      });
+      return {
+        ...toRefs(state),
+        increase,
+        decrease,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -216,6 +326,22 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`);
+      return {
+        format,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/es/progress.md b/website/docs/es/progress.md
index 58d9c37fe6..851cb3f6c4 100644
--- a/website/docs/es/progress.md
+++ b/website/docs/es/progress.md
@@ -21,6 +21,22 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`);
+      return {
+        format,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -102,6 +118,55 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        percentage: 20,
+        customColor: '#409eff',
+        customColors: [
+          { color: '#f56c6c', percentage: 20 },
+          { color: '#e6a23c', percentage: 40 },
+          { color: '#5cb87a', percentage: 60 },
+          { color: '#1989fa', percentage: 80 },
+          { color: '#6f7ad3', percentage: 100 },
+        ],
+      });
+      const customColorMethod = (percentage) => {
+        if (percentage < 30) {
+          return '#909399';
+        } if (percentage < 70) {
+          return '#e6a23c';
+        }
+        return '#67c23a';
+      };
+      const increase = () => {
+        state.percentage += 10;
+        if (state.percentage > 100) {
+          state.percentage = 100;
+        }
+      };
+      const decrease = () => {
+        state.percentage -= 10;
+        if (state.percentage < 0) {
+          state.percentage = 0;
+        }
+      };
+      return {
+        ...toRefs(state),
+        customColorMethod,
+        increase,
+        decrease,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -168,6 +233,51 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs, onMounted } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        percentage: 10,
+        percentage2: 0,
+        colors: [
+          { color: '#f56c6c', percentage: 20 },
+          { color: '#e6a23c', percentage: 40 },
+          { color: '#5cb87a', percentage: 60 },
+          { color: '#1989fa', percentage: 80 },
+          { color: '#6f7ad3', percentage: 100 },
+        ],
+      });
+      const increase = () => {
+        state.percentage += 10;
+        if (state.percentage > 100) {
+          state.percentage = 100;
+        }
+      };
+      const decrease = () => {
+        state.percentage -= 10;
+        if (state.percentage < 0) {
+          state.percentage = 0;
+        }
+      };
+      onMounted(() => {
+        setInterval(() => {
+          state.percentage2 = (state.percentage2 % 100) + 10
+        }, 500)
+      });
+      return {
+        ...toRefs(state),
+        increase,
+        decrease,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -214,6 +324,22 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`);
+      return {
+        format,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/fr-FR/progress.md b/website/docs/fr-FR/progress.md
index 95b00fc478..d015dbc4ad 100644
--- a/website/docs/fr-FR/progress.md
+++ b/website/docs/fr-FR/progress.md
@@ -21,6 +21,22 @@ Progress est utilisé pour afficher la progression d'une opération et informer
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`);
+      return {
+        format,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -103,6 +119,55 @@ Vous pouvez utiliser l'attribut `color` pour définir la couleur de la barre de
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        percentage: 20,
+        customColor: '#409eff',
+        customColors: [
+          { color: '#f56c6c', percentage: 20 },
+          { color: '#e6a23c', percentage: 40 },
+          { color: '#5cb87a', percentage: 60 },
+          { color: '#1989fa', percentage: 80 },
+          { color: '#6f7ad3', percentage: 100 },
+        ],
+      });
+      const customColorMethod = (percentage) => {
+        if (percentage < 30) {
+          return '#909399';
+        } if (percentage < 70) {
+          return '#e6a23c';
+        }
+        return '#67c23a';
+      };
+      const increase = () => {
+        state.percentage += 10;
+        if (state.percentage > 100) {
+          state.percentage = 100;
+        }
+      };
+      const decrease = () => {
+        state.percentage -= 10;
+        if (state.percentage < 0) {
+          state.percentage = 0;
+        }
+      };
+      return {
+        ...toRefs(state),
+        customColorMethod,
+        increase,
+        decrease,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -170,6 +235,51 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs, onMounted } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        percentage: 10,
+        percentage2: 0,
+        colors: [
+          { color: '#f56c6c', percentage: 20 },
+          { color: '#e6a23c', percentage: 40 },
+          { color: '#5cb87a', percentage: 60 },
+          { color: '#1989fa', percentage: 80 },
+          { color: '#6f7ad3', percentage: 100 },
+        ],
+      });
+      const increase = () => {
+        state.percentage += 10;
+        if (state.percentage > 100) {
+          state.percentage = 100;
+        }
+      };
+      const decrease = () => {
+        state.percentage -= 10;
+        if (state.percentage < 0) {
+          state.percentage = 0;
+        }
+      };
+      onMounted(() => {
+        setInterval(() => {
+          state.percentage2 = (state.percentage2 % 100) + 10
+        }, 500)
+      });
+      return {
+        ...toRefs(state),
+        increase,
+        decrease,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -216,6 +326,22 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`);
+      return {
+        format,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/jp/progress.md b/website/docs/jp/progress.md
index 772e383226..32341255ec 100644
--- a/website/docs/jp/progress.md
+++ b/website/docs/jp/progress.md
@@ -21,6 +21,22 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`);
+      return {
+        format,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -103,6 +119,55 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        percentage: 20,
+        customColor: '#409eff',
+        customColors: [
+          { color: '#f56c6c', percentage: 20 },
+          { color: '#e6a23c', percentage: 40 },
+          { color: '#5cb87a', percentage: 60 },
+          { color: '#1989fa', percentage: 80 },
+          { color: '#6f7ad3', percentage: 100 },
+        ],
+      });
+      const customColorMethod = (percentage) => {
+        if (percentage < 30) {
+          return '#909399';
+        } if (percentage < 70) {
+          return '#e6a23c';
+        }
+        return '#67c23a';
+      };
+      const increase = () => {
+        state.percentage += 10;
+        if (state.percentage > 100) {
+          state.percentage = 100;
+        }
+      };
+      const decrease = () => {
+        state.percentage -= 10;
+        if (state.percentage < 0) {
+          state.percentage = 0;
+        }
+      };
+      return {
+        ...toRefs(state),
+        customColorMethod,
+        increase,
+        decrease,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -170,6 +235,51 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs, onMounted } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        percentage: 10,
+        percentage2: 0,
+        colors: [
+          { color: '#f56c6c', percentage: 20 },
+          { color: '#e6a23c', percentage: 40 },
+          { color: '#5cb87a', percentage: 60 },
+          { color: '#1989fa', percentage: 80 },
+          { color: '#6f7ad3', percentage: 100 },
+        ],
+      });
+      const increase = () => {
+        state.percentage += 10;
+        if (state.percentage > 100) {
+          state.percentage = 100;
+        }
+      };
+      const decrease = () => {
+        state.percentage -= 10;
+        if (state.percentage < 0) {
+          state.percentage = 0;
+        }
+      };
+      onMounted(() => {
+        setInterval(() => {
+          state.percentage2 = (state.percentage2 % 100) + 10
+        }, 500)
+      });
+      return {
+        ...toRefs(state),
+        increase,
+        decrease,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -216,6 +326,22 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`);
+      return {
+        format,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/zh-CN/progress.md b/website/docs/zh-CN/progress.md
index 1b770c03b7..9c355d7e6e 100644
--- a/website/docs/zh-CN/progress.md
+++ b/website/docs/zh-CN/progress.md
@@ -22,6 +22,22 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const format = (percentage) => (percentage === 100 ? '满' : `${percentage}%`);
+      return {
+        format,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 
 :::
@@ -108,6 +124,55 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        percentage: 20,
+        customColor: '#409eff',
+        customColors: [
+          { color: '#f56c6c', percentage: 20 },
+          { color: '#e6a23c', percentage: 40 },
+          { color: '#5cb87a', percentage: 60 },
+          { color: '#1989fa', percentage: 80 },
+          { color: '#6f7ad3', percentage: 100 },
+        ],
+      });
+      const customColorMethod = (percentage) => {
+        if (percentage < 30) {
+          return '#909399';
+        } if (percentage < 70) {
+          return '#e6a23c';
+        }
+        return '#67c23a';
+      };
+      const increase = () => {
+        state.percentage += 10;
+        if (state.percentage > 100) {
+          state.percentage = 100;
+        }
+      };
+      const decrease = () => {
+        state.percentage -= 10;
+        if (state.percentage < 0) {
+          state.percentage = 0;
+        }
+      };
+      return {
+        ...toRefs(state),
+        customColorMethod,
+        increase,
+        decrease,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 
 :::
@@ -178,6 +243,51 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs, onMounted } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        percentage: 10,
+        percentage2: 0,
+        colors: [
+          { color: '#f56c6c', percentage: 20 },
+          { color: '#e6a23c', percentage: 40 },
+          { color: '#5cb87a', percentage: 60 },
+          { color: '#1989fa', percentage: 80 },
+          { color: '#6f7ad3', percentage: 100 },
+        ],
+      });
+      const increase = () => {
+        state.percentage += 10;
+        if (state.percentage > 100) {
+          state.percentage = 100;
+        }
+      };
+      const decrease = () => {
+        state.percentage -= 10;
+        if (state.percentage < 0) {
+          state.percentage = 0;
+        }
+      };
+      onMounted(() => {
+        setInterval(() => {
+          state.percentage2 = (state.percentage2 % 100) + 10
+        }, 500)
+      });
+      return {
+        ...toRefs(state),
+        increase,
+        decrease,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 
 :::
@@ -226,6 +336,22 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const format = (percentage) => (percentage === 100 ? '满' : `${percentage}%`);
+      return {
+        format,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 
 :::