效果
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-button
link
type="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;
}
}