所需 DOM 元素上的自定义加载指示器 - jQuery LoadingView

所需 DOM 元素上的自定义加载指示器 - jQuery LoadingView

版本:

浏览量:182

最后更新:2021-09-12

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

LoadingView 是一个非常简单的 jQuery 加载指示器插件,它在等待加载某些内容的同时在给定元素上显示自定义加载微调器。

也可以看看:

  • 10 个最佳加载 Spinner 和 Indicator jQuery 插件

  • 10 个最佳加载 Spinner/Indicator JavaScript 和 CSS 库

  • 80 多个面向前端开发人员的最佳纯 CSS 加载微调器

如何使用它:

1. 只需在 jQuery 库之后包含 JavaScript 文件 loadingView.js 就可以了。

<script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous">
</script>
<script src="loadingView.js"></script>

2. 在您指定的元素上显示默认加载微调器。

<div id="demo">
  Dynamic Content Here
</div>
$(document).loadingView('.box');
 
// or
$(function(){
  $('.box').loadingView({
    'state': true
  });
});

3. 自定义您要使用的微调图像。 

$(function(){
  $('.box').loadingView({
    'image': "loadingImage.gif",
    'imageClassName': "loadingImage"
  });
});

4. 使装载旋转器始终位于容器的中心。

$(function(){
  $('.box').loadingView({
    'imageStyle': ""position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);""
  });
});

5. 手动隐藏加载指示器。

$(function(){
  $('.box').loadingView({
    'state': false
  });
});

发表评论

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