前言
在前端网页的开发过程中，我们经常需要在页面中添加 loading 效果来提升用户体验。svg-loading 是一个纯代码的加载动画库，通过它我们可以轻松地在页面中添加漂亮的加载动画。
本篇文章将带您深入了解 svg-loading 的使用方法，并提供实用的代码示例，让您更好地运用这个 npm 包。
安装 svg-loading
在使用 svg-loading 前，我们需要先在项目中安装它。我们可以使用 npm 命令来完成安装：
npm i svg-loading
安装完成后，我们就可以在项目中使用它了。
使用 svg-loading
引入 svg-loading
首先，我们需要在 JavaScript 文件中引入 svg-loading：
import svgLoading from 'svg-loading';
使用默认样式
svg-loading 自带几个默认样式以供使用。我们可以直接调用 svgLoading() 方法来使用默认样式的加载动画。
svgLoading();
这会在页面中添加一个默认样式的加载动画。不过，默认样式可能不符合我们的需求，因此我们可以使用参数自定义样式。
自定义样式
svgLoading() 方法可以接受一个参数对象，通过该对象我们可以自定义加载动画的样式。
svgLoading({
radius: 30, // 加载动画的半径，单位 px
strokeWidth: 4, // 加载动画的线条粗细，单位 px
color: '#fff', // 加载动画的颜色
duration: 800 // 加载动画的总时长，单位 ms
});这里我们指定了加载动画的半径为 30px，线条粗细为 4px，颜色为白色，总时长为 800ms。指定的参数将会替换默认样式的值。
绑定到指定元素
svgLoading() 方法默认会在 body 元素上添加加载动画。如果我们需要把加载动画绑定到其它元素，可以在调用 svgLoading() 方法时传入该元素。
const box = document.querySelector('.box');
svgLoading({
bindTo: box
});在这个例子中，我们将加载动画绑定到类名为 box 的元素上。
取消加载动画
当我们不需要加载动画时，可以通过调用 svgLoading.cancel() 方法来取消加载动画。
svgLoading.cancel();
这个方法会在页面中移除所有的加载动画。
示例代码
接下来，我将提供一个完整的代码示例来帮助您更好地学习 svg-loading 的使用方法：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
---------- ------- ------------
-------
---- -
------ ------
------- ------
----------------- --------
-------- -----
---------------- -------
------------ -------
-
--------
-------
------
---- ------------------
------- --------------------------
-------
-------JavaScript 文件：
-- -------------------- ---- ------- ------ ---------- ---- -------------- -- - ---- -------------- ------------- -- ---- --- ---------------- ----- --- - ------------------------------- ------------ ------- ---- ------- --- ------------ -- ------ ---------- --------- ---- --- -- --------- ------------- -- - -------------------- -- ------
以上代码会在页面中添加两个加载动画，一个默认样式的加载动画在 body 元素中显示，另一个自定义样式的加载动画在类名为 box 的元素中显示。5秒后，两个加载动画都会自动消失。
结语
通过本文，您已经了解了如何使用 svg-loading 添加漂亮的加载动画。svg-loading 的使用非常简单，您只需要几行代码就可以在页面中添加一个漂亮的加载动画。
当然，svg-loading 的样式不是无限制的，您可以根据自己的需求，自定义加载动画的样式。希望这篇文章可以帮助您更好地利用 svg-loading 进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f73238a385564ab6846