在前端开发中，我们经常需要给客户端反馈一些操作的状态，比如加载中、处理中等状态，常见的方式是通过使用加载动画。这篇文章将介绍一个 npm 包——jquery.showloading，它提供了一种构建加载动画的简单方法。
jquery.showloading 的介绍
jquery.showloading 是一个基于 jQuery 的加载动画插件，它提供了一组方法和选项，通过这些方法和选项，可以实现不同类型和风格的加载动画。
jquery.showloading 的安装和使用
安装
安装 jquery.showloading 的方式非常简单，只需要在项目中使用 npm install 命令即可：
npm install jquery.showloading --save
使用
当成功安装 jquery.showloading 模块后，我们需要在前端页面中引入 jquery.js 和 jquery.showloading.js：
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-showloading/1.0.4/jquery.showloading.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery-showloading/1.0.4/jquery.showloading.min.js"></script>
接下来我们可以在代码中使用以下方法创建一个加载动画：
$.showLoading({
name: 'jump-pulse',
// 更多选项可以在下方查看
});该函数的第一个参数是一个对象，用于配置加载动画的一些基本信息和展示效果，我们可以在这个对象中为 name 属性指定一个预定义的动画效果，例如上例中的 jump-pulse。
除此之外，jquery.showloading 还有很多更高级的用法，下面是一些常用的选项和用法：
delay
在加载动画出现之前添加延迟。
$.showLoading({
delay: 5000, // 毫秒
});color
更改加载动画的颜色。
$.showLoading({
color: '#ff0000',
});message
在加载动画的顶部，添加一些文字信息。
$.showLoading({
message: '处理中...',
});img
使用一个自定义的图片替换加载动画。
$.showLoading({
img: '/images/loading.gif',
});使用这些选项和方法，我们可以非常灵活地使用 jquery.showloading 模块，实现各种类型和风格的加载动画。
示例代码
下面是一个使用 jquery.showloading 模块的例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- --------------------------------------------------------------------
----- ---------------- ---------------------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------------------
-------
------
---- ----------- ---
------- ---------------------------
--------
---------------------- -- -
---------------
------ -----
----- --------------
------ ----------
-------- ---------
---
------------- -- -
----------------
-- ------
---
---------
-------
-------上面的代码在页面的某个位置添加一个按钮，当点击该按钮时，将触发一个 2s 的加载动画，此时页面将会出现一个 square-spin 类型的加载动画，同时展示一条 加载中... 的信息。
jquery.showloading 的总结
jquery.showloading 是一个设计简单、易于使用的加载动画模块，我们可以在各种应用场景下使用它，从而为客户端操作提供一些简单的反馈。除此之外，它还提供了多种选项和用法，允许开发者自由地定制自己的加载动画。
如果你正在寻找一种用于构建加载动画的解决方案，不妨考虑一下 jquery.showloading 模块，它可能会帮助你解决一些开发难题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1f81e8991b448dac8e