<!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>
mui加载动画样式,全局可用加载样式
最新推荐文章于 2022-10-11 16:50:53 发布