详细信息
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
});
发表评论
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。