gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: loading调整为css方式实现

Browse Source
This commit is contained in:
chenjinsong
2022-08-24 19:17:54 +08:00
parent 4b33609ab4
commit 7623839097
2 changed files with 84 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/assets/css/components/views/charts/chart.scss
View File

@@ -415,6 +415,82 @@
width: 20px;
}
}
@keyframes cn-loading__inner {
0% { opacity: 1 }
100% { opacity: 0 }
}
.cn-loading__inner div {
left: 10px;
top: 0;
position: absolute;
animation: cn-loading__inner linear 1s infinite;
background: #3c76cc;
width: 6px;
height: 6px;
border-radius: 3px / 3px;
transform-origin: 3px 13px;
}
.cn-loading__inner div:nth-child(1) {
transform: rotate(0deg);
animation-delay: -0.875s;
background: #3c76cc;
}
.cn-loading__inner div:nth-child(2) {
transform: rotate(45deg);
animation-delay: -0.75s;
background: #3c76cc;
}
.cn-loading__inner div:nth-child(3) {
transform: rotate(90deg);
animation-delay: -0.625s;
background: #3c76cc;
}
.cn-loading__inner div:nth-child(4) {
transform: rotate(135deg);
animation-delay: -0.5s;
background: #3c76cc;
}
.cn-loading__inner div:nth-child(5) {
transform: rotate(180deg);
animation-delay: -0.375s;
background: #3c76cc;
}
.cn-loading__inner div:nth-child(6) {
transform: rotate(225deg);
animation-delay: -0.25s;
background: #3c76cc;
}
.cn-loading__inner div:nth-child(7) {
transform: rotate(270deg);
animation-delay: -0.125s;
background: #3c76cc;
}
.cn-loading__inner div:nth-child(8) {
transform: rotate(315deg);
animation-delay: 0s;
background: #3c76cc;
}
.cn-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 27px;
height: 27px;
display: inline-block;
overflow: hidden;
background: transparent;
}
.cn-loading__inner {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0;
}
.cn-loading__inner div { box-sizing: content-box; }
}
.map-back {