diff --git a/docs/assets/ts/artplayer.d.ts b/docs/assets/ts/artplayer.d.ts
index 76f2ce0ff..a181ef13e 100644
--- a/docs/assets/ts/artplayer.d.ts
+++ b/docs/assets/ts/artplayer.d.ts
@@ -874,6 +874,7 @@ export interface CssVar {
   '--art-border-radius': string
   '--art-progress-height': string
   '--art-progress-color': string
+  '--art-progress-top-gap': string
   '--art-hover-color': string
   '--art-loaded-color': string
   '--art-state-size': string
diff --git a/packages/artplayer/src/style/progress.less b/packages/artplayer/src/style/progress.less
index de399a87a..9c5b58857 100644
--- a/packages/artplayer/src/style/progress.less
+++ b/packages/artplayer/src/style/progress.less
@@ -3,6 +3,7 @@
         position: relative;
         z-index: 0;
         pointer-events: auto;
+        padding-top: var(--art-progress-top-gap);
         padding-bottom: var(--art-bottom-gap);
 
         .art-control-progress {
diff --git a/packages/artplayer/src/style/variables.less b/packages/artplayer/src/style/variables.less
index c0b70014e..74ccf20f2 100644
--- a/packages/artplayer/src/style/variables.less
+++ b/packages/artplayer/src/style/variables.less
@@ -8,6 +8,7 @@
     --art-border-radius: 3px;
     --art-progress-height: 6px;
     --art-progress-color: rgba(255, 255, 255, 0.25);
+    --art-progress-top-gap: 8px;
     --art-hover-color: rgba(255, 255, 255, 0.25);
     --art-loaded-color: rgba(255, 255, 255, 0.25);
     --art-state-size: 80px;
diff --git a/packages/artplayer/types/cssVar.d.ts b/packages/artplayer/types/cssVar.d.ts
index 47d8c8a88..e9384c07f 100644
--- a/packages/artplayer/types/cssVar.d.ts
+++ b/packages/artplayer/types/cssVar.d.ts
@@ -8,6 +8,7 @@ export interface CssVar {
   '--art-border-radius': string
   '--art-progress-height': string
   '--art-progress-color': string
+  '--art-progress-top-gap': string
   '--art-hover-color': string
   '--art-loaded-color': string
   '--art-state-size': string