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;
    }
}