详细信息
hg-loading 是一个简单的 jQuery 加载器插件，它在等待文档中加载某些内容时显示可自定义的加载微调器。具有适当的 ARIA 角色以实现可访问性。
如何使用它：
1. 首先，在 jQuery 之后包含 hg-loading 插件。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
crossorigin="anonymous">
</script>
<script src="assets/js/loader.js"></script>2. 显示加载指示器。
$.showLoading();3. 将淡入和淡出动画应用于加载指示器。
.hg-loading {
background: #c1c1c1;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
transition: opacity .2s;
}
.hg-loading.fade{
opacity: 1;
transition: opacity .2s;
}
.loading-body {
position: absolute;
left: 50%;
top: 50%;
width: 75px;
height: 75px;
margin-left: -35px;
margin-top: -35px;
}4. 隐藏加载指示器。
$.hideLoading();5. 覆盖默认加载微调器。
$.showLoading({
imgLoading: '/path/to/loading.svg'
});6. 更多默认值的配置选项。
$.showLoading({
// body html
body: "",
// loading class
loadingClass: "fade",
// dialog class
loadingDialogClass: ""
});7. 可用的回调函数。
$.showLoading({
// fired after the Loading was created
onCreate: null,
// fired after the Loading was disposed
onDispose: null
});
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。