SOURCE

console 命令行工具 X clear

                    
>
console
<div class="cssload-wrap">
	<div class="cssload-cssload-spinner"></div>
</div>
.cssload-wrap {
	display: flex;
		display: -o-flex;
		display: -ms-flex;
		display: -webkit-flex;
		display: -moz-flex;
	box-pack: center;
		-o-box-pack: center;
		-ms-box-pack: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
	justify-content: center;
		-o-justify-content: center;
		-ms-justify-content: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;
	box-align: center;
		-o-box-align: center;
		-ms-box-align: center;
		-webkit-box-align: center;
		-moz-box-align: center;
	align-items: center;
		-o-align-items: center;
		-ms-align-items: center;
		-webkit-align-items: center;
		-moz-align-items: center;
	perspective: 390px;
		-o-perspective: 390px;
		-ms-perspective: 390px;
		-webkit-perspective: 390px;
		-moz-perspective: 390px;
	height: 100%;
	overflow: hidden;
}

.cssload-cssload-spinner {
	position: relative;
	transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
	animation: cssload-wobble 11.77s ease-in-out infinite;
		-o-animation: cssload-wobble 11.77s ease-in-out infinite;
		-ms-animation: cssload-wobble 11.77s ease-in-out infinite;
		-webkit-animation: cssload-wobble 11.77s ease-in-out infinite;
		-moz-animation: cssload-wobble 11.77s ease-in-out infinite;
}
.cssload-cssload-spinner:before, .cssload-cssload-spinner:after {
	display: block;
	content: "";
	width: 88px;
	height: 88px;
	border: 44px solid;
	border-radius: 50%;
	animation: cssload-spin 4.43s ease-in-out infinite both reverse;
		-o-animation: cssload-spin 4.43s ease-in-out infinite both reverse;
		-ms-animation: cssload-spin 4.43s ease-in-out infinite both reverse;
		-webkit-animation: cssload-spin 4.43s ease-in-out infinite both reverse;
		-moz-animation: cssload-spin 4.43s ease-in-out infinite both reverse;
}
.cssload-cssload-spinner:before {
	border-color: rgb(221,221,221);
	position: absolute;
}
.cssload-cssload-spinner:after {
	border-color: black;
	animation-delay: -2.21s;
		-o-animation-delay: -2.21s;
		-ms-animation-delay: -2.21s;
		-webkit-animation-delay: -2.21s;
		-moz-animation-delay: -2.21s;
}





@keyframes cssload-wobble {
	0%, 100% {
		transform: rotateX(8.75deg) rotateY(35deg);
	}
	50% {
		transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
	}
}

@-o-keyframes cssload-wobble {
	0%, 100% {
		-o-transform: rotateX(8.75deg) rotateY(35deg);
	}
	50% {
		-o-transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
	}
}

@-ms-keyframes cssload-wobble {
	0%, 100% {
		-ms-transform: rotateX(8.75deg) rotateY(35deg);
	}
	50% {
		-ms-transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
	}
}

@-webkit-keyframes cssload-wobble {
	0%, 100% {
		-webkit-transform: rotateX(8.75deg) rotateY(35deg);
	}
	50% {
		-webkit-transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
	}
}

@-moz-keyframes cssload-wobble {
	0%, 100% {
		-moz-transform: rotateX(8.75deg) rotateY(35deg);
	}
	50% {
		-moz-transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
	}
}

@keyframes cssload-spin {
	0%, 100% {
		transform: translateZ(49px) rotateX(14deg);
	}
	33% {
		transform: translateZ(-49px) scale(0.4);
	}
	66% {
		transform: translateZ(-49px);
	}
}

@-o-keyframes cssload-spin {
	0%, 100% {
		-o-transform: translateZ(49px) rotateX(14deg);
	}
	33% {
		-o-transform: translateZ(-49px) scale(0.4);
	}
	66% {
		-o-transform: translateZ(-49px);
	}
}

@-ms-keyframes cssload-spin {
	0%, 100% {
		-ms-transform: translateZ(49px) rotateX(14deg);
	}
	33% {
		-ms-transform: translateZ(-49px) scale(0.4);
	}
	66% {
		-ms-transform: translateZ(-49px);
	}
}

@-webkit-keyframes cssload-spin {
	0%, 100% {
		-webkit-transform: translateZ(49px) rotateX(14deg);
	}
	33% {
		-webkit-transform: translateZ(-49px) scale(0.4);
	}
	66% {
		-webkit-transform: translateZ(-49px);
	}
}

@-moz-keyframes cssload-spin {
	0%, 100% {
		-moz-transform: translateZ(49px) rotateX(14deg);
	}
	33% {
		-moz-transform: translateZ(-49px) scale(0.4);
	}
	66% {
		-moz-transform: translateZ(-49px);
	}
}