mirror of
http://112.124.100.131/ebiz-ai/ebiz-base-ai.git
synced 2025-12-09 02: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;
|
||||
}
|
||||
.render-loading{
|
||||
.container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: auto;
|
||||
filter: url("#goo");
|
||||
animation: rotate-move 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
.spinner {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: grid;
|
||||
border: 4px solid #0000;
|
||||
border-radius: 50%;
|
||||
background-color: #000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
border-right-color: #004dff;
|
||||
animation: spinner-a4dj62 1s infinite linear;
|
||||
}
|
||||
|
||||
.dot-3 {
|
||||
background-color: #ff1717;
|
||||
animation: dot-3-move 2s ease infinite, index 6s ease infinite;
|
||||
.spinner::before,
|
||||
.spinner::after {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
@keyframes spinner-a4dj62 {
|
||||
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'>
|
||||
<!--以下内容替换-->
|
||||
<!--替换完成之后修改loading.scss 保留render-loading-->
|
||||
<div class="container">
|
||||
<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 class="spinner"></div>
|
||||
|
||||
<!--以上内容替换-->
|
||||
</div>`
|
||||
|
||||
Reference in New Issue
Block a user