You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
3.3 KiB
48 lines
3.3 KiB
.wux-loading {
|
|
position: fixed;
|
|
z-index: 5000;
|
|
top: 50%;
|
|
left: 50%;
|
|
background: rgba(40,40,40,.75);
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
border-radius: 8rpx;
|
|
color: #fff;
|
|
transform: translate3d(-50%,-50%,0)
|
|
}
|
|
.wux-loading__content {
|
|
min-width: 236rpx;
|
|
padding: 18rpx 30rpx;
|
|
box-sizing: border-box
|
|
}
|
|
.wux-loading__content--has-icon {
|
|
padding: 30rpx
|
|
}
|
|
.wux-loading__content--has-icon .wux-loading__text {
|
|
margin-top: 12rpx
|
|
}
|
|
.wux-loading__icon {
|
|
margin: 0;
|
|
display: block
|
|
}
|
|
.wux-loading__icon--loading {
|
|
display: inline-block!important;
|
|
vertical-align: middle;
|
|
animation: loading 1s steps(12,end) infinite;
|
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h100v100H0z%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%2220%22%20x%3D%2246.5%22%20y%3D%2240%22%20fill%3D%22%23E9E9E9%22%20rx%3D%225%22%20ry%3D%225%22%20transform%3D%22translate(0%20-30)%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%2220%22%20x%3D%2246.5%22%20y%3D%2240%22%20fill%3D%22%23989697%22%20rx%3D%225%22%20ry%3D%225%22%20transform%3D%22rotate(30%20105.98%2065)%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%2220%22%20x%3D%2246.5%22%20y%3D%2240%22%20fill%3D%22%239B999A%22%20rx%3D%225%22%20ry%3D%225%22%20transform%3D%22rotate(60%2075.98%2065)%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%2220%22%20x%3D%2246.5%22%20y%3D%2240%22%20fill%3D%22%23A3A1A2%22%20rx%3D%225%22%20ry%3D%225%22%20transform%3D%22rotate(90%2065%2065)%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%2220%22%20x%3D%2246.5%22%20y%3D%2240%22%20fill%3D%22%23ABA9AA%22%20rx%3D%225%22%20ry%3D%225%22%20transform%3D%22rotate(120%2058.66%2065)%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%2220%22%20x%3D%2246.5%22%20y%3D%2240%22%20fill%3D%22%23B2B2B2%22%20rx%3D%225%22%20ry%3D%225%22%20transform%3D%22rotate(150%2054.02%2065)%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%2220%22%20x%3D%2246.5%22%20y%3D%2240%22%20fill%3D%22%23BAB8B9%22%20rx%3D%225%22%20ry%3D%225%22%20transform%3D%22rotate(180%2050%2065)%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%2220%22%20x%3D%2246.5%22%20y%3D%2240%22%20fill%3D%22%23C2C0C1%22%20rx%3D%225%22%20ry%3D%225%22%20transform%3D%22rotate(-150%2045.98%2065)%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%2220%22%20x%3D%2246.5%22%20y%3D%2240%22%20fill%3D%22%23CBCBCB%22%20rx%3D%225%22%20ry%3D%225%22%20transform%3D%22rotate(-120%2041.34%2065)%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%2220%22%20x%3D%2246.5%22%20y%3D%2240%22%20fill%3D%22%23D2D2D2%22%20rx%3D%225%22%20ry%3D%225%22%20transform%3D%22rotate(-90%2035%2065)%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%2220%22%20x%3D%2246.5%22%20y%3D%2240%22%20fill%3D%22%23DADADA%22%20rx%3D%225%22%20ry%3D%225%22%20transform%3D%22rotate(-60%2024.02%2065)%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%2220%22%20x%3D%2246.5%22%20y%3D%2240%22%20fill%3D%22%23E2E2E2%22%20rx%3D%225%22%20ry%3D%225%22%20transform%3D%22rotate(-30%20-5.98%2065)%22%2F%3E%3C%2Fsvg%3E");
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
margin: 10rpx 0 0!important;
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
vertical-align: baseline
|
|
}
|
|
@keyframes loading {
|
|
0% {
|
|
transform: rotate3d(0,0,1,0deg)
|
|
}
|
|
100% {
|
|
transform: rotate3d(0,0,1,360deg)
|
|
}
|
|
}
|