master

分支 (2)

管理

管理

master

dev_test

web-test
/
加载旋转动画2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@-webkit-keyframes rotation {
				from {
					-webkit-transform: rotate(0deg)
				}

				to {
					-webkit-transform: rotate(359deg)
				}
			}

			@-moz-keyframes rotation {
				from {
					-moz-transform: rotate(0deg)
				}

				to {
					-moz-transform: rotate(359deg)
				}
			}

			@-o-keyframes rotation {
				from {
					-o-transform: rotate(0deg)
				}

				to {
					-o-transform: rotate(359deg)
				}
			}

			@keyframes rotation {
				from {
					transform: rotate(0deg)
				}

				to {
					transform: rotate(359deg)
				}
			}

			.fade.in {
				filter: alpha(opacity=100);
			}

			.fade.in {
				opacity: 1;
			}

			.fade {
				opacity: 0;
				filter: alpha(opacity=0);
				-webkit-transition: opacity .3s linear;
				transition: opacity .3s linear;
			}

			.fade {
				opacity: 0;
				-webkit-transition: opacity .15s linear;
				-o-transition: opacity .15s linear;
				transition: opacity .15s linear;
			}

			.fade.in .spinner,
			.fade.in .spinner-small {
				-webkit-animation: rotation .6s infinite linear;
				-moz-animation: rotation .6s infinite linear;
				-o-animation: rotation .6s infinite linear;
				animation: rotation .6s infinite linear;
			}

			.spinner {
				height: 40px;
				width: 40px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -20px -20px 0 0;
				border: 2px solid #fff;
				border-top: 2px solid #24B498;
				border-radius: 100%;
			}

			#page-loader.fade.in {
				display: block;
			}

			#page-loader.fade {
				display: none;
			}

			#page-loader {
				position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background: #E6E8EC;
			}
		</style>
	</head>
	<body>
		<div id="page-loader" class="fade in"><span class="spinner"></span></div>
	</body>
</html>
<script>
	//document.getElementById('page-loader').className = 'fade';
</script>