feat: demo 添加加载动画

zhaohappy · May 12, 2024 · 44454f6 · 44454f6
1 parent c8e897d
commit 44454f6
Showing 1 changed file with 70 additions and 0 deletions.
diff --git a/test/avplayer.html b/test/avplayer.html
@@ -153,6 +153,61 @@
         /* margin: 0 50px; */
       }
 
+      .loading-mask {
+        position: absolute;
+        z-index: 2000;
+        margin: 0;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 480px;
+        display: none;
+      }
+
+      .loading-spinner {
+        top: 50%;
+        margin-top: -21px;
+        width: 100%;
+        text-align: center;
+        position: absolute;
+      }
+
+      .loading-spinner .circular {
+        height: 42px;
+        width: 42px;
+        animation: loading-rotate 2s linear infinite;
+      }
+
+      .loading-spinner .circular .path {
+        animation: loading-dash 1.5s ease-in-out infinite;
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: 0;
+        stroke-width: 2;
+        stroke: #fff;
+        stroke-linecap: round;
+      }
+
+      @keyframes loading-rotate {
+          to {
+              transform: rotate(1turn)
+          }
+      }
+      @keyframes loading-dash {
+          0% {
+              stroke-dasharray: 1,200;
+              stroke-dashoffset: 0
+          }
+
+          50% {
+              stroke-dasharray: 90,150;
+              stroke-dashoffset: -40px
+          }
+
+          to {
+              stroke-dasharray: 90,150;
+              stroke-dashoffset: -120px
+          }
+      }
     </style>
 </head>
 <body>
@@ -259,6 +314,16 @@
           </el-option>
         </el-select>
       </div>
+
+      <div class="loading-mask" id="loading-mask">
+        <div class="loading-spinner">
+          <svg viewBox="25 25 50 50" class="circular">
+            <circle cx="50" cy="50" r="20" fill="none" class="path">
+
+            </circle>
+          </svg>
+        </div>
+      </div>
     </div>
 
     <div class="flip">
@@ -574,7 +639,12 @@
           playRateDom.style.display = 'none'
         }
 
+        document.querySelector('#loading-mask').style.display = 'block'
+
         player.load(document.querySelector('#file').files[0] ? document.querySelector('#file').files[0] : urlComponent.url).then(() => {
+
+          document.querySelector('#loading-mask').style.display = 'none'
+
           if (slider) {
             slider.duration = Number(player.getDuration())
           }