mirror of
http://112.124.100.131/ebiz-ai/ebiz-base-ai.git
synced 2025-12-11 03:46:50 +08:00
style: 更新 loading 组件样式- 移除复杂的 dot 动画，替换为简单的 spinner 动画
- 优化 loading.scss样式文件，大幅减少代码量 - 更新 loading.js 中的 HTML 结构，简化为单个 spinner 元素
This commit is contained in:
陈昱达
@@ -3,204 +3,42 @@
|
|||||||
z-index: 3000!important;
|
z-index: 3000!important;
|
||||||
}
|
}
|
||||||
.render-loading{
|
.render-loading{
|
||||||
.container {
|
.spinner {
|
||||||
width: 200px;
|
width: 56px;
|
||||||
height: 200px;
|
height: 56px;
|
||||||
position: absolute;
|
display: grid;
|
||||||
top: 50%;
|
border: 4px solid #0000;
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
margin: auto;
|
|
||||||
filter: url("#goo");
|
|
||||||
animation: rotate-move 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot {
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: #000;
|
border-right-color: #004dff;
|
||||||
position: absolute;
|
animation: spinner-a4dj62 1s infinite linear;
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot-3 {
|
.spinner::before,
|
||||||
background-color: #ff1717;
|
.spinner::after {
|
||||||
animation: dot-3-move 2s ease infinite, index 6s ease infinite;
|
content: "";
|
||||||
|
grid-area: 1/1;
|
||||||
|
|
||||||
|
margin: 2px;
|
||||||
|
border: inherit;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spinner-a4dj62 2s infinite;
|
||||||
|
}
|
||||||
|
.spinner::after{
|
||||||
|
border-right-color:#2E5CA9
|
||||||
|
}
|
||||||
|
.spinner::before{
|
||||||
|
border-right-color:#F6AA21;
|
||||||
|
}
|
||||||
|
.spinner{
|
||||||
|
border-right-color:rgba(135, 162, 208, 0.5)}
|
||||||
|
.spinner::after {
|
||||||
|
margin: 8px;
|
||||||
|
animation-duration: 3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot-2 {
|
@keyframes spinner-a4dj62 {
|
||||||
background-color: #0051ff;
|
|
||||||
animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot-1 {
|
|
||||||
background-color: #ffc400;
|
|
||||||
animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes dot-3-move {
|
|
||||||
20% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
45% {
|
|
||||||
transform: translateY(-18px) scale(0.45);
|
|
||||||
}
|
|
||||||
60% {
|
|
||||||
transform: translateY(-90px) scale(0.45);
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
transform: translateY(-90px) scale(0.45);
|
|
||||||
}
|
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(0px) scale(1);
|
transform: rotate(1turn);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes dot-2-move {
|
|
||||||
20% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
45% {
|
|
||||||
transform: translate(-16px, 12px) scale(0.45);
|
|
||||||
}
|
|
||||||
60% {
|
|
||||||
transform: translate(-80px, 60px) scale(0.45);
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
transform: translate(-80px, 60px) scale(0.45);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateY(0px) scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes dot-1-move {
|
|
||||||
20% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
45% {
|
|
||||||
transform: translate(16px, 12px) scale(0.45);
|
|
||||||
}
|
|
||||||
60% {
|
|
||||||
transform: translate(80px, 60px) scale(0.45);
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
transform: translate(80px, 60px) scale(0.45);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateY(0px) scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate-move {
|
|
||||||
55% {
|
|
||||||
transform: translate(-50%, -50%) rotate(0deg);
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
transform: translate(-50%, -50%) rotate(360deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translate(-50%, -50%) rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes index {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
33.3% {
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
66.6% {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//speakLoading
|
|
||||||
|
|
||||||
.loader3 {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bars {
|
|
||||||
width: 10px;
|
|
||||||
height: 20px;
|
|
||||||
margin: 0 2px;
|
|
||||||
border-radius: 4px;
|
|
||||||
animation: loader3 1.2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.bar1 {
|
|
||||||
background-color: #4285F4;
|
|
||||||
animation-delay: -0.8s;
|
|
||||||
}
|
|
||||||
.bar2 {
|
|
||||||
background-color: #4285F4;
|
|
||||||
animation-delay: -0.7s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar3 {
|
|
||||||
background-color: #4285F4;
|
|
||||||
animation-delay: -0.6s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar4 {
|
|
||||||
background-color: #4285F4;
|
|
||||||
animation-delay: -0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar5 {
|
|
||||||
background-color: #4285F4;
|
|
||||||
animation-delay: -0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar6 {
|
|
||||||
background-color: #4285F4;
|
|
||||||
animation-delay: -0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar7 {
|
|
||||||
background-color: #4285F4;
|
|
||||||
animation-delay: -0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar8 {
|
|
||||||
background-color: #4285F4;
|
|
||||||
animation-delay: -0.1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar9 {
|
|
||||||
background-color: #4285F4;
|
|
||||||
animation-delay: 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar10 {
|
|
||||||
background-color: #4285F4;
|
|
||||||
animation-delay: 0.1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes loader3 {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
transform: scale(1, 2.32);
|
|
||||||
}
|
|
||||||
|
|
||||||
40% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,29 +1,7 @@
|
|||||||
const loadingTemp = `<div class='render-loading'>
|
const loadingTemp = `<div class='render-loading'>
|
||||||
<!--以下内容替换-->
|
<!--以下内容替换-->
|
||||||
<!--替换完成之后修改loading.scss 保留render-loading-->
|
<!--替换完成之后修改loading.scss 保留render-loading-->
|
||||||
<div class="container">
|
<div class="spinner"></div>
|
||||||
<div class="dot dot-1"></div>
|
|
||||||
<div class="dot dot-2"></div>
|
|
||||||
<div class="dot dot-3"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<defs>
|
|
||||||
<filter id="goo">
|
|
||||||
<feGaussianBlur
|
|
||||||
result="blur"
|
|
||||||
stdDeviation="10"
|
|
||||||
in="SourceGraphic"
|
|
||||||
></feGaussianBlur>
|
|
||||||
<feColorMatrix
|
|
||||||
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7"
|
|
||||||
mode="matrix"
|
|
||||||
in="blur"
|
|
||||||
></feColorMatrix>
|
|
||||||
</filter>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
|
||||||
<!--以上内容替换-->
|
<!--以上内容替换-->
|
||||||
</div>`
|
</div>`
|
||||||
|
|||||||
Reference in New Issue
Block a user