.loader-container {
    text-align: center;
}
        
.loader-image {
    width: 70px;
    height: 70px;
    opacity: 0;
    animation: fadeInOut 2s infinite ease-in-out;
}
        
@keyframes fadeInOut {
    0% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.4;
    }
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(46, 46, 46);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1; /*这是不透明度*/
  transition: opacity 0.5s ease-out; /*设置不透明度以0.5秒的速度淡出*/
}

.loader.hidden {
  opacity: 0;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}