介绍
Tiny-Loading 是一款可以轻松实现网页加载进度条的 npm 包。它可以帮助开发者在网页中添加简洁、好看的进度条，为用户提供更好的用户体验。
在本教程中，我们将介绍如何使用 Tiny-Loading 包来实现网页进度条，以及如何将其应用于不同的项目中。
安装
首先，我们需要通过 npm 包管理工具来安装 Tiny-Loading。在终端中运行以下命令即可：
npm install tiny-loading --save-dev
通过这个命令，我们就可以将 Tiny-Loading 安装到我们的项目中，并将其保存为开发依赖包。
使用
安装完成后，我们就可以开始使用 Tiny-Loading 来创建我们的进度条了！
初始化
首先，在项目中引入 Tiny-Loading 包：
import TinyLoading from 'tiny-loading';
然后，我们需要在 HTML 文件中添加一个 div，用作进度条的容器。例如：
<div class="loading-container"></div>
接下来，我们需要使用 TinyLoading 类来初始化这个容器：
const loadingContainer = document.querySelector('.loading-container');
const tinyLoading = new TinyLoading(loadingContainer);这里我们使用 querySelector 方法来获取刚刚添加的容器，并将其传递给 TinyLoading 的构造函数中。这样，我们就完成了 Tiny-Loading 的初始化，可以开始使用它来显示进度条了。
显示进度条
在开始加载数据的时候，我们需要使用 TinyLoading 的 start 方法来启动进度条的显示：
tinyLoading.start();
这个方法会在页面中显示一个进度条，并开始自动变化进度条的长度，以表明正在加载数据。
设置进度条样式
Tiny-Loading 提供了一些默认的 CSS 样式可以用来渲染进度条，但是如果你想要自定义它的样式，你可以在构造函数中传入一个配置对象：
const config = {
height: '5px',
color: '#22b0ff',
duration: '1s'
};
const tinyLoading = new TinyLoading(loadingContainer, config);这里的配置对象包括了三个属性：
- height：进度条的高度（px 或者 %）
- color：进度条的颜色
- duration：进度条从 0% 到 100% 变化的时间长度（秒）
你可以根据自己的需求来设置这些属性，以达到不同的进度条效果。
隐藏进度条
当数据加载完成后，我们需要使用 TinyLoading 的 stop 方法来停止进度条的显示：
tinyLoading.stop();
这个方法会在页面中隐藏进度条，并停止进度条长度的变化。
示例代码
下面是一个完整的示例代码，展示了如何使用 Tiny-Loading 包来创建并控制一个简单的进度条。
-- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- ----------------
------------------- ------------
-------
------------------ -
--------- ------
---- --
----- --
------ --
-
--------
-------
------
---- --------------------------------
------- ------------------------
-------
--------- -------------------- ---- ------- -- -------- ------ ----------- ---- --------------- -- -------- ----- ---------------- - --------------------------------------------- ----- ----------- - --- ----------------------------- - ------- ------ ------ ---------- --------- ---- --- -- ------ ------------- -- - -- -------- ------------------- -- ------ -- -------- --------------------
总结
通过本篇文章的介绍，我们了解了如何使用 Tiny-Loading 包来创建并控制一个简单的进度条。虽然 Tiny-Loading 的功能是比较简单的，但是它可以为我们的网页提供一个好看、简单的进度条，提升用户体验。希望对你们有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e1fb81d47349e53d5c