【CSS】小球旋转loading加载动画

效果

css小球旋转loading动画

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: flex;justify-content: center;align-items: center;}.base_loading {margin: 100px auto;width: 60px;height: 60px;position: relative;}.round {position: absolute;width: 20px;height: 20px;border-radius: 50%;background-color: red;animation: circleRound 2.8s ease infinite;transform-origin: 50% 30px;}.round:nth-child(1) {z-index: 7;}.round:nth-child(2) {height: 18px;width: 18px;background-color: orange;animation-delay: 0.2s;z-index: 6;}.round:nth-child(3) {height: 16px;width: 16px;background-color: yellow;animation-delay: 0.4s;z-index: 5;}.round:nth-child(4) {height: 14px;width: 14px;background-color: green;animation-delay: 0.6s;z-index: 4;}.round:nth-child(5) {height: 12px;width: 12px;background-color: cyan;animation-delay: 0.8s;z-index: 3;}.round:nth-child(6) {height: 10px;width: 10px;background-color: blue;animation-delay: 1s;z-index: 2;}.round:nth-child(7) {height: 8px;width: 8px;background-color: purple;animation-delay: 1.2s;z-index: 1;}.round:nth-child(8) {height: 6px;width: 6px;background-color: purple;animation-delay: 1.4s;z-index: 1;}@keyframes circleRound {to {transform: rotate(1turn);}}</style></head><body><div class="container"><div class="base_loading"><div class="round"></div><div class="round"></div><div class="round"></div><div class="round"></div><div class="round"></div><div class="round"></div><div class="round"></div><div class="round"></div></div></div></body>
</html>

嵌入 el-loading

在这里插入图片描述

const loadingHTML = `<foreignObject  x="0" y="0" width="100px" height="100px"><div class="base_loading"><div class="round"></div><div class="round"></div><div class="round"></div><div class="round"></div><div class="round"></div><div class="round"></div><div class="round"></div><div class="round"></div></div></foreignObject>`;

      <el-buttonlinktype="primary"@click="handleAnalysis"v-loading.fullscreen.lock="fullscreenLoading"element-loading-custom-class="my_loading"element-loading-text="文档解析中，请稍后...":element-loading-spinner="loadingHTML"element-loading-svg-view-box="0 0 120 120">解析</el-button>

.my_loading {.circular {width: 120px !important;height: 120px !important;animation: none;position: relative;.base_loading {width: 100%;height: 100%;position: absolute;left: 50%;.round {position: absolute;width: 20px;height: 20px;border-radius: 50%;background-color: rgba($color: var(--c-rgb), $alpha: 0.3);animation: circleRound 2.8s ease infinite;transform-origin: 50% 30px;}.round:nth-child(1) {z-index: 7;}.round:nth-child(2) {height: 18px;width: 18px;background-color: rgba($color: var(--c-rgb), $alpha: 0.4);animation-delay: 0.2s;z-index: 6;}.round:nth-child(3) {height: 16px;width: 16px;background-color: rgba($color: var(--c-rgb), $alpha: 0.5);animation-delay: 0.4s;z-index: 5;}.round:nth-child(4) {height: 14px;width: 14px;background-color: rgba($color: var(--c-rgb), $alpha: 0.6);animation-delay: 0.6s;z-index: 4;}.round:nth-child(5) {height: 12px;width: 12px;background-color: rgba($color: var(--c-rgb), $alpha: 0.7);animation-delay: 0.8s;z-index: 3;}.round:nth-child(6) {height: 10px;width: 10px;background-color: rgba($color: var(--c-rgb), $alpha: 0.8);animation-delay: 1s;z-index: 2;}.round:nth-child(7) {height: 8px;width: 8px;background-color: rgba($color: var(--c-rgb), $alpha: 0.9);animation-delay: 1.2s;z-index: 1;}.round:nth-child(8) {height: 6px;width: 6px;background-color: rgba($color: var(--c-rgb), $alpha: 1);animation-delay: 1.4s;z-index: 1;}@keyframes circleRound {to {transform: rotate(1turn);}}}}.el-loading-text {position: relative;top: -40px;}
}