介绍
spinny是一个用于显示加载状态的前端库，它可以在网页中生成旋转动画，方便用户了解当前页面的加载状态。本文将会教会读者如何使用spinny。
安装
要安装spinny，可以使用npm命令，如下所示：
npm install spinny
基本用法
要使用spinny，需要先引入它的CSS文件和JS文件，如下所示：
<link rel="stylesheet" href="/path/to/spinny.css"> <script src="/path/to/spinny.js"></script>
引入后，我们就可以使用Spinny对象创建一个实例并显示它。
下面是一个简单的HTML文件，展示如何使用Spinny显示“加载中”的状态：
-- -------------------- ---- -------
--------- -----
------
------
--------------------------------
----- ---------------- ---------------------------
------- ----------------------------------
-------
------
------- ------------------------
---- -------------------
--------
--- ------- - --- -------------------------------------------
-------------------------------------- - ---------- -
---------------
--------------------- -
---------------
-- ------
--
---------
-------
-------在上面的例子中，我们创建了一个按钮和一个用于显示Loading状态的DIV标签。当用户点击按钮时，我们使用Spinny对象创建一个实例，并显示该实例。3秒钟后，我们调用实例的hide()方法隐藏Loading状态。
深入了解
Spinny提供了许多选项来自定义它的行为。下面是使用Spinny的一些示例，展示了如何使用选项来自定义Spinny的样式和效果。
自定义样式
您可以通过自定义选项来自定义Spinny对象的样式和行为，如下所示：
var loading = new Spinny(document.getElementById("loading"), {
color: "red",
duration: "1000ms",
size: "30px",
radius: "20px"
});在上面的例子中，我们创建了一个新的Spinny对象，并传递了一个选项对象作为第二个参数。该选项对象指定了Spinny对象的颜色，持续时间，大小和半径。
自定义CSS类
您可以通过自定义CSS类来自定义Spinny对象的样式，如下所示：
.spinny-custom {
border-top-color: blue;
border-left-color: blue;
}在上面的例子中，我们定义了一个名为.spinny-custom的CSS类，该类设置旋转动画的边框颜色。
然后我们可以使用这个类来创建Spinny对象，如下所示：
var loading = new Spinny(document.getElementById("loading"), {
className: "spinny-custom"
});显示和隐藏事件
您可以通过监听show和hide事件来处理Spinny对象的显示和隐藏，如下所示：
-- -------------------- ---- ------- --- ------- - --- ------------------------------------------- ------------------ ---------- - -------------------- -- -------- --- ------------------ ---------- - -------------------- -- --------- ---
在上面的例子中，我们使用on方法为Spinny对象的show和hide事件注册了回调函数。每当Spinny对象显示或隐藏时，回调函数都会被调用。
总结
spinny是一个简单易用的前端库，可以方便地显示加载状态。使用本文所介绍的方法，读者可以轻松地创建和定制spinny对象，以满足不同的需求。
希望本篇技术文章能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709b8ccae46eb111efa7