介绍
在前端开发中，进度条是一个非常常见的功能。可惜的是，很多时候我们需要自己写一些样式和 JS 代码来实现这个功能，而这不仅耗时费力，还容易出错。那么，有没有一种简单易用的 npm 包可以帮我们完成这个任务呢？答案是肯定的！本文就要介绍的 npm 包 pleasant-progress 就可以帮助我们快速构建进度条。
安装 pleasant-progress
你可以像安装其他 npm 包那样通过以下命令安装 pleasant-progress：
npm install pleasant-progress
使用 pleasant-progress
使用 pleasant-progress 非常容易。首先在你的 HTML 文件中引入这个 npm 包提供的 CSS 样式：
<link rel="stylesheet" href="node_modules/pleasant-progress/dist/pleasant-progress.css">
然后，你需要在你的 JavaScript 代码中初始化 Progress 对象，并为其设置当前的进度：
import Progress from 'pleasant-progress'; const progress = new Progress(document.querySelector('[aria-label="Loading..."]')); // Set current progress to 50% progress.setProgress(50);
这里的 document.querySelector('[aria-label="Loading..."]') 是用来获取你想要使用进度条的元素的。你可以根据实际情况修改这个选择器。
API 文档
new Progress(element [, options])
element<HTMLElement> 必选 如果要使用进度条的元素options<Object> 可选 可以选择以下选项：direction<"ltr"| "rtl"> 设置进度条的方向。 默认为 ltr。max<number> 设置进度条的最大值，默认为 100。
创建一个新的 Progress 实例。
progress.setProgress(percent)
percent<number> 必选 当前的进度，百分比。
设置进度条的进度。 percent 参数的取值范围是 0 到 100。
progress.reset()
重新开始进度条的动画。
progress.complete()
完成进度条的动画并将进度设置为 100%。
示例代码
HTML
<div class="loading" aria-label="Loading..."> <div class="loading__bar"></div> </div>
CSS
-- -------------------- ---- ------- -------- - --------- --------- -------- ------ ------ ---- ------- ----- ------- - ----- ----------- ----------- - ------------- - ------ ----- ------- ----- ----------------- -------- -------------- ----- --------- --------- ---- -- ----- -- -------- --- - ------------- - ----------------- -------- ------- ----- -------------- ----- --------- --------- ---- -- ----- -- -------- ---- -展开代码
JavaScript
-- -------------------- ---- ------- ------ -------- ---- -------------------- ----- -------- - --- -------------------------------------------------------------- -- ----- -------- --- ------------------------- -- --- ------- ------- --- -- ------ -------- --- ------------------------- -- --- ------- ------- --- -- --- -------- --- -- ---- --------------------展开代码
总结
Pleasant-progress 帮助我们在前端开发中快速实现进度条的功能。通过上述的使用教程我们可以看到如何使用 Pleasant-progress 来实现进度条功能，并在实际开发过程中灵活修改 Pleasant-progress 的配置。
欢迎大家试用，也欢迎大家留言评论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaf3cb5cbfe1ea0610fbb
