diff --git a/packages/varlet-cli/site/pc/main.ts b/packages/varlet-cli/site/pc/main.ts
index bbd0cb7ccb9..1ea7e3dad2d 100644
--- a/packages/varlet-cli/site/pc/main.ts
+++ b/packages/varlet-cli/site/pc/main.ts
@@ -21,11 +21,20 @@ const router = createRouter({
   routes,
 })
 
+let isEnd = true
 const { start, end } = useProgress()
 
-router.beforeEach(() => start())
+router.beforeEach(() => {
+  isEnd = false
+  setTimeout(() => {
+    if (!isEnd) start()
+  }, 200)
+})
 
-router.afterEach(() => end())
+router.afterEach(() => {
+  isEnd = true
+  end()
+})
 
 window.top['router'] = router
 
diff --git a/packages/varlet-cli/site/useProgress.ts b/packages/varlet-cli/site/useProgress.ts
index 45539acce61..3fcb9a59173 100644
--- a/packages/varlet-cli/site/useProgress.ts
+++ b/packages/varlet-cli/site/useProgress.ts
@@ -13,7 +13,7 @@ export function useProgress() {
     },
     trackColor: '#fff',
     color: '#3594d9',
-    lineWidth: 2,
+    lineWidth: 3,
     value: 0
   })
 
diff --git a/packages/varlet-ui/src/progress/progress.less b/packages/varlet-ui/src/progress/progress.less
index 8ecc9d5c662..16d232d9de7 100644
--- a/packages/varlet-ui/src/progress/progress.less
+++ b/packages/varlet-ui/src/progress/progress.less
@@ -41,7 +41,7 @@
       background-color: @progress-background;
       top: 0;
       left: 0;
-      transition: all 0.2s;
+      transition: all 0.2s, background-color 0.8s;
     }
 
     &__label {