82 lines
1.3 KiB
Plaintext
82 lines
1.3 KiB
Plaintext
view.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: rgba(30, 30, 30, 0.6);
|
|
}
|
|
|
|
view.spinner {
|
|
width: 650rpx;
|
|
height: 650rpx;
|
|
margin: 100rpx auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.spin-and-shrink {
|
|
animation: spin-and-shrink 3s linear forwards;
|
|
}
|
|
|
|
view.spinner image {
|
|
width: 650rpx;
|
|
height: 650rpx;
|
|
}
|
|
|
|
@keyframes spin-and-shrink {
|
|
0% {
|
|
transform: rotate(-90deg) scale(5.5)
|
|
}
|
|
10% {
|
|
transform: rotate(0deg) scale(2.0)
|
|
}
|
|
33% {
|
|
transform: rotate(90deg) scale(1.0);
|
|
}
|
|
66% {
|
|
transform: rotate(2000deg) scale(0.5);
|
|
}
|
|
99% {
|
|
transform: rotate(3600deg) scale(0.2);
|
|
}
|
|
100% {
|
|
transform: rotate(3600deg) scale(0.2);
|
|
}
|
|
}
|
|
|
|
.spin-only {
|
|
animation: spin-only 0.3s linear infinite;
|
|
}
|
|
|
|
@keyframes spin-only {
|
|
0% {
|
|
transform: rotate(0deg) scale(0.2);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg) scale(0.2);
|
|
}
|
|
}
|
|
|
|
view.loading {
|
|
font-size: 1.5rem;
|
|
color: #eee;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 50rpx;
|
|
top: 800rpx;
|
|
text-align: center;
|
|
animation: fade-in-out 2s linear infinite;
|
|
}
|
|
|
|
@keyframes fade-in-out {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|