Web App 开发----加载中的按钮_加载中按钮-CSDN博客

本文链接：https://blog.csdn.net/m0_58760840/article/details/123761370

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body>
		       <h5>加载中的按钮:</h5>
				<button type="button" class="mui-btn">默认</button>
				<button type="button" class="mui-btn mui-btn-primary">确定</button>
				<button type="button" class="mui-btn mui-btn-primary" data-loading-text="提交中">自定义文案</button>
				<button type="button" class="mui-btn mui-btn-primary"
				data-loading-icon="mui-spinner mui-spinner-custom">
				自定义icon
				</button>
				<button type="button" class="mui-btn mui-btn-primary" data-loading-icon-position="right">右侧显示icon</button>
				<button type="button" class="mui-btn mui-btn-primary" data-loading-icon="">不显示icon</button>
		<script src="js/mui.min.js"></script>
			<script type="text/javascript" charset="utf-8">
				mui.init();
				mui(document.body).on('tap', '.mui-btn', function(e) {
				    mui(this).button('loading');
				    setTimeout(function() {
				        mui(this).button('reset');
				    }.bind(this), 2000);
				});
			</script>
	</body>

</html>

属性名	作用
data-loading-text	loading 状态显示的文案,默认为: `loading`
data-loading-icon	loading 状态显示的icon,默认为`mui-spinner`或`mui-spinner mui-spinner-white`（根据按钮样式自动识别），为空表示不使用icon
data-loading-icon-position	loading 状态显示的icon的位置,支持left/right默认left

代码效果：