mui加载动画样式，全局可用加载样式

最新推荐文章于 2023-07-15 22:27:10 发布

courage(●'◡'●)

最新推荐文章于 2023-07-15 22:27:10 发布

阅读量479

点赞数

分类专栏： mui 文章标签： mui

本文链接：https://blog.csdn.net/aa59609911/article/details/106094020

版权

mui 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
	
	<style type="text/css">
		/* 屏幕居中 */
		.loading-container{
			position: fixed;
			z-index: 9999;
			top: 50%;
			left: 50%;
			width: 24px;
			height: 24px;
			margin-top: -12px;
			margin-left: -12px;
		}
		
		/* 旋转动画 */
		.cxy-spinner {
		    display: inline-block;
		    width: 24px;
		    height: 24px;
		    -webkit-transform-origin: 50%;
		    transform-origin: 50%;
		    -webkit-animation: spinner-spin 1s step-end infinite;
		    animation: spinner-spin 1s step-end infinite;
		}
		
		/* 旋转图标 */
		.cxy-spinner:after {
		    display: block;
		    width: 100%;
		    height: 100%;
		    content: '';
		    background-image: url(data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http:…:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>);
		    background-repeat: no-repeat;
		    background-position: 50%;
		    background-size: 100%;
		}
	</style>
</head>
<body>
	<div class="mui-loading">
		<div class="mui-spinner">
		</div>
	</div>
	
	
	<!-- <div class="mui-loading" id="app">
		<div class="mui-spinner">
		</div>
	</div> -->
	
	
	
	<script type="text/javascript">
		//容器
		let container = document.createElement('div');
		container.className = 'loading-container';
		
		//旋转图标
		let icon = document.createElement('div');
		icon.className = 'mui-spinner';
		container.appendChild(icon);
		
		//内容
		let content = document.createElement('div');
		content.textContent = 'loading...';
		content.style.position = 'relative';
		content.style.left = -17 + 'px';
		content.style.color = 'grey';
		container.appendChild(content);
		
		document.body.appendChild(container);
	</script>
</body>
</html>