使用 jQuery 和 CSS 的 10 个很棒的加载指标 - JAjaxLoader

使用 jQuery 和 CSS 的 10 个很棒的加载指标 - JAjaxLoader

版本:

浏览量:187

最后更新:2021-09-12

应用标签:MAC 软件Jquery插件

推荐指数:

详细信息

JAjaxLoader jQuery 插件为异步操作提供了 10 个很酷的创意加载微调器和指示器的集合。

也可以看看:

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

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

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

如何使用它:

1.jajaxloader.js在 jQuery 之后加载主要的 JavaScript 文件

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
        crossorigin="anonymous">
</script>
<script src="./js/jajaxloader.js"></script>

2. 在文档中加载您选择的加载指示器。

<link rel="stylesheet" href="./skin/jajaxloader.css">
<link rel="stylesheet" href="./skin/lukehaas/vertical_bars.css">
<link rel="stylesheet" href="./skin/lukehaas/circle_on_path.css">
<link rel="stylesheet" href="./skin/lukehaas/tear_ball.css">
<link rel="stylesheet" href="./skin/vulchivijay/rosace.css">
<link rel="stylesheet" href="./skin/cssload/thecube.css">
<link rel="stylesheet" href="./skin/cssload/colordots.css">
<link rel="stylesheet" href="./skin/cssload/flipping_square.css">
<link rel="stylesheet" href="./skin/cssload/spinning_square.css">
<link rel="stylesheet" href="./skin/cssload/zenith.css">
<link rel="stylesheet" href="./skin/cssload/ventilator.css">

3. 调用目标容器上的函数并指定要使用的加载 CSS。

$('#target').ajaxloader({
  cssClass: 'vulchivijay_rosace'
});

4. 您可以改用自定义图像。

$('#target').ajaxloader({
  img: 'loader.gif'
});

5.自定义加载指示器的内容,仅当加载器不是图像时才起作用。

$('#target').ajaxloader({
  content: 'your own content here'
});

6.自定义加载指示器淡入淡出时的动画速度。

$('#target').ajaxloader({
  fadeSpeed: 250
});

发表评论

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