#preloader{
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position:fixed;
    display:flex;
    top:0;left:0;right:0;bottom:0;
    z-index:9999;
    width:100%;height:100%;
}
#preloader.out{
    animation:fadeOut .4s forwards;
}
@keyframes fadeOut{to{opacity:0;}}

/* logo 循环闪动 */
#preloader img{
    height:75px;
    animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
    0%,100%{opacity:.3;transform:scale(.95);}
    50%{opacity:1;transform:scale(1);}
}


/*头部进度条*/
#top-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: #ff000c;
	z-index: 10000;
	transition: width .3s, opacity .4s;
}

#top-progress.done,
#spin-icon.done {
	opacity: 0;
	visibility: hidden;
}
/*右侧加载*/
#spin-icon {
	position: fixed;
	top: 14px;
	right: 55px;
	width: 20px;
	height: 20px;
	border: 2px solid #f3f3f3;
	border-top: 2px solid #ff000c;
	border-radius: 50%;
	animation: spin .4s linear infinite;
	z-index: 10001;
	transition: opacity .6s, visibility .4s;
	background: transparent;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}