diff --git a/packages/devui-vue/devui/progress/src/progress.tsx b/packages/devui-vue/devui/progress/src/progress.tsx
index 0f9c88beaa1b032246f7e7fdb3b2869f557e32ad..2c380bdc03036feaed3173bc02a84d93fd9f08e0 100644
--- a/packages/devui-vue/devui/progress/src/progress.tsx
+++ b/packages/devui-vue/devui/progress/src/progress.tsx
@@ -117,14 +117,14 @@ export default defineComponent({
 
     const progressLine = (
       <div
-        className="devui-progress--line"
+        class="devui-progress--line"
         style={{
           height: height,
           borderRadius: height,
         }}
       >
         <div
-          className="devui-progress-bar"
+          class="devui-progress-bar"
           style={{
             height: height,
             borderRadius: height,
@@ -143,21 +143,21 @@ export default defineComponent({
     );
 
     const textElement = (
-      <span className="devui-progress-circle-text">{percentage}%</span>
+      <span class="devui-progress-circle-text">{percentage}%</span>
     );
 
     const progressCircle = (
-      <div className="devui-progress-circle">
-        <svg className="devui-progress-circle" viewBox="0 0 100 100">
+      <div class="devui-progress-circle">
+        <svg class="devui-progress-circle" viewBox="0 0 100 100">
           <path
-            className="devui-progress-circle-trail"
+            class="devui-progress-circle-trail"
             fill-opacity="0"
             stroke-width={strokeWidth}
             style={data.trailPath}
             d={data.pathString}
           />
           <path
-            className="devui-progress-circle-path"
+            class="devui-progress-circle-path"
             d={data.pathString}
             stroke-linecap="round"
             fill-opacity="0"
@@ -172,7 +172,7 @@ export default defineComponent({
     );
 
     return (
-      <div className="devui-progress">
+      <div class="devui-progress">
         {!isCircle ? progressLine : progressCircle}
       </div>
     );
diff --git a/packages/devui-vue/docs/components/progress/index.md b/packages/devui-vue/docs/components/progress/index.md
index 8358ba6ad957ec7b3ff4e53828637585ea406a97..893a00372b83a68ebfae27cf228635764b5ee44e 100644
--- a/packages/devui-vue/docs/components/progress/index.md
+++ b/packages/devui-vue/docs/components/progress/index.md
@@ -18,7 +18,7 @@
         <d-progress :percentage="80" percentageText="80%"></d-progress>
     </div>
     <div class="progress-container">
-        <d-progress :percentage="30" percentageText="30%" barbgcolor="#50D4AB" height="30px"></d-progress>
+        <d-progress :percentage="30" percentageText="30%" barBgColor="#50D4AB" height="30px"></d-progress>
     </div>
 </section>
 </template>
@@ -46,11 +46,11 @@
             <d-progress :isCircle="true" :percentage="80" :showContent="false"> </d-progress>
         </div>
         <div class="progress-container-circle">
-            <d-progress :isCircle="true" :percentage="80" barbgcolor="#50D4AB" :strokeWidth="8">
+            <d-progress :isCircle="true" :percentage="80" barBgColor="#50D4AB" :strokeWidth="8">
             </d-progress>
         </div>
         <div class="progress-container-circle">
-            <d-progress :isCircle="true" :percentage="80" barbgcolor="#50D4AB">
+            <d-progress :isCircle="true" :percentage="80" barBgColor="#50D4AB">
                 <span class="icon-position">
                     <d-icon
                         name="right"