<template> <div class="custom-loading-container" v-if="loading"> <div class="loadingio-spinner-pulse-2by998twmg8"> <div class="ldio-yzaezf3dcmj"> <div></div> <div></div> <div></div> </div> </div> </div> </template> <script setup> const props = defineProps({ loading: { type: Boolean, default: false } }) </script> <style scoped> .custom-loading-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); z-index: 1000; } .loading-text { color: #fff; margin-top: 20px; font-size: 14px; } /* loading 动画样式 */ @keyframes ldio-yzaezf3dcmj-1 { 0% { top: 36px; height: 128px } 50% { top: 60px; height: 80px } 100% { top: 60px; height: 80px } } @keyframes ldio-yzaezf3dcmj-2 { 0% { top: 41.99999999999999px; height: 116.00000000000001px } 50% { top: 60px; height: 80px } 100% { top: 60px; height: 80px } } @keyframes ldio-yzaezf3dcmj-3 { 0% { top: 48px; height: 104px } 50% { top: 60px; height: 80px } 100% { top: 60px; height: 80px } } .ldio-yzaezf3dcmj div { position: absolute; width: 30px; } .ldio-yzaezf3dcmj div:nth-child(1) { left: 35px; background: #e15b64; animation: ldio-yzaezf3dcmj-1 1s cubic-bezier(0,0.5,0.5,1) infinite; animation-delay: -0.2s } .ldio-yzaezf3dcmj div:nth-child(2) { left: 85px; background: #f8b26a; animation: ldio-yzaezf3dcmj-2 1s cubic-bezier(0,0.5,0.5,1) infinite; animation-delay: -0.1s } .ldio-yzaezf3dcmj div:nth-child(3) { left: 135px; background: #abbd81; animation: ldio-yzaezf3dcmj-3 1s cubic-bezier(0,0.5,0.5,1) infinite; } .loadingio-spinner-pulse-2by998twmg8 { width: 200px; height: 200px; display: inline-block; overflow: hidden; background: none; } .ldio-yzaezf3dcmj { width: 100%; height: 100%; position: relative; transform: translateZ(0) scale(1); backface-visibility: hidden; transform-origin: 0 0; } .ldio-yzaezf3dcmj div { box-sizing: content-box; } </style>