vue后台管理添加等待样式index.html

最新推荐文章于 2024-04-12 16:34:25 发布

停留的章小鱼

最新推荐文章于 2024-04-12 16:34:25 发布

阅读量126

点赞数

文章标签： vue.js html 前端

本文链接：https://blog.csdn.net/2201_75870706/article/details/131242033

版权

效果图：

实现：

在/public/index.html下：

<head>
  <style>
	html,
	body,
	#app {
	    height: 100%;
	    margin: 0px;
	    padding: 0px;
	}

	.chromeframe {
		margin: 0.2em 0;
		background: #ccc;
		color: #000;
		padding: 0.2em 0;
	}

	#loader-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999999;
	}

	#loader {
		display: block;
		position: relative;
		left: 50%;
		top: 50%;
		width: 150px;
		height: 150px;
		margin: -75px 0 0 -75px;
		border-radius: 50%;
		border: 3px solid transparent;
		border-top-color: #FFF;
		-webkit-animation: spin 2s linear infinite;
		-ms-animation: spin 2s linear infinite;
		-moz-animation: spin 2s linear infinite;
		-o-animation: spin 2s linear infinite;
		animation: spin 2s linear infinite;
		z-index: 1001;
	}

	#loader:before {
		content: "";
		position: absolute;
		top: 5px;
		left: 5px;
		right: 5px;
		bottom: 5px;
		border-radius: 50%;
		border: 3px solid transparent;
		border-top-color: #FFF;
		-webkit-animation: spin 3s linear infinite;
		-moz-animation: spin 3s linear infinite;
		-o-animation: spin 3s linear infinite;
		-ms-animation: spin 3s linear infinite;
		animation: spin 3s linear infinite;
	}

	#loader:after {
		content: "";
		position: absolute;
		top: 15px;
		left: 15px;
		right: 15px;
		bottom: 15px;
		border-radius: 50%;
		border: 3px solid transparent;
		border-top-color: #FFF;
		-moz-animation: spin 1.5s linear infinite;
		-o-animation: spin 1.5s linear infinite;
		-ms-animation: spin 1.5s linear infinite;
		-webkit-animation: spin 1.5s linear infinite;
		animation: spin 1.5s linear infinite;
	}


	@-webkit-keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}


	#loader-wrapper .loader-section {
		position: fixed;
		top: 0;
		width: 51%;
		height: 100%;
		background: #55aaff;
		z-index: 1000;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}

	#loader-wrapper .loader-section.section-left {
		left: 0;
	}

	#loader-wrapper .loader-section.section-right {
		right: 0;
	}


	.loaded #loader-wrapper .loader-section.section-left {
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
		-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
		transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	}

	.loaded #loader-wrapper .loader-section.section-right {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
		-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
		transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	}

	.loaded #loader {
		opacity: 0;
		-webkit-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}

	.loaded #loader-wrapper {
		visibility: hidden;
		-webkit-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		transform: translateY(-100%);
		-webkit-transition: all 0.3s 1s ease-out;
		transition: all 0.3s 1s ease-out;
	}

	.no-js #loader-wrapper {
		display: none;
	}

	.no-js h1 {
		color: #222222;
	}

	#loader-wrapper .load_title {
		font-family: 'Open Sans';
		color: #FFF;
		font-size: 19px;
		width: 100%;
		text-align: center;
		z-index: 9999999999999;
		position: absolute;
		top: 60%;
		opacity: 1;
		line-height: 30px;
	}

	#loader-wrapper .load_title span {
		font-weight: normal;
		font-style: italic;
		font-size: 13px;
		color: #FFF;
		opacity: 0.5;
	}
 </style>
</head>
<body>
    <div id="app">
		<div id="loader-wrapper">
			<div id="loader"></div>
			<div class="loader-section section-left"></div>
			<div class="loader-section section-right"></div>
			<div class="load_title">正在加载系统资源，请耐心等待</div>
		</div>
	</div>
</body>