Optimization progress bar style

packages/artplayer/src/style/bottom.scss

@@ -17,6 +17,7 @@
         .art-progress {
             position: relative;
             pointer-events: auto;
+
             .art-control-progress {
                 position: relative;
                 display: flex;
@@ -26,10 +27,13 @@
                 cursor: pointer;
 
                 .art-control-progress-inner {
+                    display: flex;
+                    align-items: center;
                     position: relative;
                     height: 50%;
                     width: 100%;
                     background: rgba(255, 255, 255, 0.2);
+
                     .art-progress-loaded {
                         position: absolute;
                         z-index: 10;
@@ -76,12 +80,14 @@
                     }
 
                     .art-progress-indicator {
-                        display: none;
+                        visibility: hidden;
                         align-items: center;
                         justify-content: center;
                         position: absolute;
                         z-index: 40;
                         border-radius: 50%;
+                        transform: scale(0.1, 0.1);
+                        transition: all 0.1s ease-in-out;
 
                         .art-icon {
                             width: 100%;
@@ -89,10 +95,6 @@
                             pointer-events: none;
                             user-select: none;
                         }
-
-                        &.art-show-indicator {
-                            display: flex;
-                        }
                     }
 
                     .art-progress-tip {
@@ -113,16 +115,6 @@
                         white-space: nowrap;
                     }
                 }
-
-                &:hover {
-                    .art-control-progress-inner {
-                        height: 100%;
-                        .art-progress-indicator,
-                        .art-progress-tip {
-                            display: flex;
-                        }
-                    }
-                }
             }
 
             .art-control-thumbnails {
@@ -273,6 +265,17 @@
                 }
             }
         }
+
+        &:hover {
+            .art-progress .art-control-progress .art-control-progress-inner {
+                height: 100%;
+                .art-progress-indicator {
+                    transform: scale(1, 1);
+                    visibility: visible;
+                    transition: all 0.1s ease-in-out;
+                }
+            }
+        }
     }
 
     &.art-control-show,