在前端开发中，我们经常需要添加加载等待动画，以提高用户体验。常见的做法是使用 GIF 图片或是 CSS 实现等待动画。然而这些做法都有其不足之处，例如 GIF 图片可能过大加载缓慢，CSS 实现需要手动编写动画等等。鉴于这些问题，广泛使用的一种做法是使用一个 npm 包 spnnr。
什么是 spnnr？
spnnr 是一个 JavaScript 库，它提供了多种加载等待动画的实现。这些动画都是非常简单易用的，只需要几行代码即可实现。spnnr 是一个可以跨浏览器使用的库，具有易读且易于维护的 API 和丰富的配置选项。
安装 spnnr
安装 spnnr 非常简单，只需要执行以下命令即可：
npm install spnnr --save
使用 spnnr
安装完毕后我们可以开始使用它了。我们将介绍如何使用 spnnr 创建一个简单的加载等待动画，该动画将无限旋转一些绿色的球。
第一步是在 HTML 文件中添加一个
<div id="spinner-container"></div>
接下来，我们需要通过 JavaScript 将 spnnr 库导入到我们的项目中：
import Spnnr from 'spnnr';
现在我们可以创建加载等待动画了。在 JavaScript 文件中，我们可以使用以下代码创建一个 loading 控件，如下所示：
const spinner = new Spnnr({
el: document.getElementById('spinner-container'),
type: 'three-bounce',
color: '#53b3f5',
});以上代码创建了一个名为 spinner 的加载 Spinner 实例，而且将其包装在指定的容器中。它将使用类型为 'three-bounce' 的预定义动画，该动画将持续旋转三个球。还可以通过 color 属性来更改球的颜色。
spnnr 示例代码
-- -------------------- ---- ------- ------ ----- ---- -------- -- ------- ----- ------- - --- ------- --- --------------------------------------------- ----- --------------- ------ ---------- --- -- ---- ------- -- ------------------- ----- ---------------- ------ ---------- ---
总结
在本文中，我们介绍了 spnnr 这个 npm 包的基本使用方法。要想更好的体验加载等待动画，你可以使用各种预定义的动画类型以及不同的配置选项。这不仅可以增强用户体验，而且能够更加美观。如果您正在寻找一种简单又易于维护的 loading 动画实现方式，那么请尝试使用 spnnr！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552eb81e8991b448d052b