在前端开发中，我们常常需要展示一个 loading 动效来提高用户体验。而 jj_spinner 这个 npm 包就是用于创建这样的 loading 动画的。这篇文章将详细介绍如何使用 jj_spinner 包，包括如何安装、如何使用以及如何个性化定制。
安装 jj_spinner
安装 jj_spinner 可以通过 npm 来完成。在终端中输入如下命令：
npm install jj_spinner
使用 jj_spinner
要使用 jj_spinner，首先需要在 HTML 文件中加入以下代码：
<div class='jj_spinner'></div>
然后在 CSS 文件中引入 jj_spinner 的样式：
@import '<node_modules>/jj_spinner/jj_spinner.css';
接着，就可以使用以下代码来启用 loading 动画：
const spinner = document.querySelector('.jj_spinner');
spinner.classList.add('active');定制 jj_spinner
如果你想要个性化定制 jj_spinner，可以自己手动修改 jj_spinner.css 文件中的样式。以下是常用的几个个性化样式属性：
--jj-spinner-size：指定动画的大小，默认为 1rem；--jj-spinner-color：指定动画的颜色，默认为 #888；--jj-spinner-speed：指定动画的速度，默认为 1s。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----------------- ------------
-------
-- -- ---------- -- --
------- -------------------------------------------
-- ---- ------- - ------ --
---- -
-------- -----
------- --
-
-- ------------- --
--------------- -
-------- -----
---------------------- --------- -----
--------- -----
-
---------- -
----------------- -----
------- ------
-------- -----
------------ -------
---------------- -------
-------------- ----
-
--------
-------
------
-------------- ---------
---- -----------------------
---- ------------------
---- -------------------------
------
---- ------------------
---- ------------------ -----------------------------------------------------------
------
---- ------------------
---- ------------------ --------------------------------------
------
------
--------
----- -------- - -----------------------------------------
------------------------ -- -
--------------------------------
---
---------
-------
-------这是一个简单的示例，其中使用了一个 3x1 的 grid 来展示三种不同的 jj_spinner，它们各自有单独的样式属性。用以上代码打开网页后，将会看到如下效果：
以上就是如何使用 jj_spinner 的详细教程，希望能帮助到你。在实际使用中，你可以根据自己的需求来进一步进行个性化的定制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556dd81e8991b448d3b83
