增加加载动画

src/views/components/element/cloudCoachElement/cloudCoachPlayer/cloudCoachPlayer.vue

@@ -8,8 +8,12 @@
     }"
   >
     <div v-if="loading" class="loading-overlay">
-      <div class="spinner"></div>
-      <div class="text">云教练加载中...</div>
+      <div class="loadingBox">
+        <div class="loadingItem"></div>
+        <div class="loadingItem"></div>
+        <div class="loadingItem"></div>
+        <div class="loadingItem"></div>
+      </div>
     </div>
     <iframe class="musicIframe" frameborder="0" :src="url" @load="handleIframeLoad"></iframe>
   </div>
@@ -37,7 +41,7 @@ const url = computed(() => {
 })
 
 // 先关闭这个功能
-const loading = ref(false)
+const loading = ref(true)
 function handleIframeLoad() {
   loading.value = false
 }
@@ -69,23 +73,33 @@ function handleIframeLoad() {
     flex-direction: column;
     z-index: 10;
     color: #fff;
-    background-color: #213793;
-    .spinner {
-      border: 4px solid #f3f3f3;
-      border-top: 4px solid #213793;
-      border-radius: 50%;
-      width: 40px;
-      height: 40px;
-      animation: spin 1s linear infinite;
-    }
-    .text {
-      margin-top: 10px;
+    background: url("../cloudCoachList/imgs/musicBg.png");
+    background-size: cover;
+    .loadingBox {
+      width: 36px;
+      height: 36px;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      align-content: space-between;
+      margin-bottom: 28px;
+      animation: rotate 1.5s linear infinite;
+      .loadingItem {
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: #569cfe;
+        opacity: 0.5;
+        &:nth-child(2) {
+          opacity: 1;
+        }
+      }
     }
-    @keyframes spin {
-      0% {
+    @keyframes rotate {
+      from {
         transform: rotate(0deg);
       }
-      100% {
+      to {
         transform: rotate(360deg);
       }
     }