在前端开发中，经常需要给用户提供一些加载提示，以方便用户体验。这时可以使用一个打字机效果的 loading 动画，这种动画的作用就是模拟打字机的打字效果，让用户感受到页面在加载中。
然而，要实现这种效果并不容易，需要用到一些比较繁琐的 CSS 和 JS 代码，对于一些开发者来说会有一定的门槛。
幸好，有一个名叫 simple-text-spinner 的 npm 包，它提供了一个简单高效的打字机 loading 效果，非常适合在前端项目中使用。本文将介绍 simple-text-spinner 的使用教程，并提供详细的示例代码。
安装 simple-text-spinner
首先需要安装 simple-text-spinner 包，可以使用 npm 安装，如下：
npm install simple-text-spinner --save
安装完成后，可以在项目的 node_modules 目录中找到 simple-text-spinner 包。
使用 simple-text-spinner
使用 simple-text-spinner 是非常简单的，只需要在页面中引入 simple-text-spinner 提供的 CSS 和 JS 文件，然后在需要添加 loading 效果的元素中，添加 class 为 spinner 的 div。
在 HTML 文件中添加以下代码：
<link rel="stylesheet" href="./node_modules/simple-text-spinner/dist/simple-text-spinner.min.css"> ... <div class="spinner"></div>
在 JS 文件中添加以下代码：
import SimpleTextSpinner from 'simple-text-spinner'
const spinner = new SimpleTextSpinner('.spinner')
spinner.start()
setInterval(() => {
spinner.next()
}, 50)这里首先将 simple-text-spinner 的 JS 文件引入，并使用 import 方式引入；然后实例化 SimpleTextSpinner，传入元素选择器，这里是 .spinner，即添加了 class 为 spinner 的 div；最后启动 spinner 并设置其动画时间间隔。
在这里需要注意一点，simple-text-spinner 的默认动画一共有 12 个状态，自动播放间隔为 100 ms，如果需要自定义间隔时间，可以在 setInterval 的第二个参数中调整。
调整 simple-text-spinner
simple-text-spinner 的默认样式可能不太适合所有页面，但是可以自己调整样式以适应不同的需求。下面是一些可以调整的样式参数：
- --spinner-color: spinner 的字体颜色。
- --spinner-font-size: spinner 的字体大小。
- --spinner-letter-spacing: spinner 的字母之间的间距。
- --spinner-duration: spinner 的动画时间。
- --spinner-frames: spinner 的帧数。
如果需要调整 simple-text-spinner 的样式，可以在 CSS 文件中添加以上的样式参数，并且增加相应的参数值，以更改 spinner 的样式。
示例代码
下面是一个完整的简单示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- ---------------------------- ------------------
------------- ---- ---------------
----- --------------- ---------------------------- -----------------
----- ---------------- ---------------------------------------------------------------------------
-------
---------- -
-------- -----
---------------- -------
------------ -------
------- ------
--------------- -------
-
-- -
----------- -------
-
--------
-------
------
---- ------------------
-------------------
---- ----------------------
------
------- ----------------------------------------------------------------------------------
------- --------------
------ ----------------- ---- --------------------------------------------------------------------
----- ------- - --- -----------------------------
---------------
-------------- -- -
--------------
-- ---
---------
-------
-------简单来说，就是添加一个 container 容器，并在其中添加 h1 标签以及 class 为 spinner 的 div，引入 simple-text-spinner 的 CSS 和 JS 文件，实例化 SimpleTextSpinner 并启动，设置自动播放时间间隔。打开浏览器，加载该页面即可看到简单的 loading 效果。
结论
simple-text-spinner 是一个非常实用的前端工具库，能够方便开发者快速添加简单的打字机 loading 效果。虽然 simple-text-spinner 功能简单，但是对于前端初学者来说，这是一个非常好的项目入门经验，能够让开发者更好地了解 CSS 和 JS 所组成的基础动画效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ed281e8991b448dc8d5