使用 jQuery 的可访问加载指示器 - hg-loading

使用 jQuery 的可访问加载指示器 - hg-loading

版本:

浏览量:1126

最后更新:2021-09-12

应用标签:gitJquery插件MAC 软件

推荐指数:

详细信息

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
 
});
联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。