介绍
@darkedges/md-fab-progress 是一个基于 Material Design 的浮动操作按钮进度条组件。它使用 svg 和 CSS 来创建一个简单、易用、易浏览的进度条。该组件完全开源，支持定制和扩展，适用于多种前端项目。
安装
使用 npm 进行安装：
npm install @darkedges/md-fab-progress
用法
引入 @darkedges/md-fab-progress 后，就可以直接在代码中使用该组件。
import MDFabProgress from '@darkedges/md-fab-progress' MDFabProgress.init() // 初始化组件
使用时，可以在 HTML 中添加一个按钮和一个用于显示进度的元素，并为它们分别添加自定义的类名：
<button class="my-fab-progress-button"> 开始上传 </button> <div class="my-fab-progress-bar"></div>
然后，使用如下 JS 代码将它们绑定：
MDFabProgress.init({
selector: '.my-fab-progress-button',
barSelector: '.my-fab-progress-bar',
color: '#ff5722'
})这里的 selector 指定了按钮的类名，barSelector 指定了进度条的类名，color 则指定了进度条颜色。
API
@darkedges/md-fab-progress 提供了如下 API：
init(options:Object):void
初始化组件。options 传入的选项包括：
selector(string): 指定按钮的类名。默认值为.md-fab.barSelector(string): 指定进度条的类名。默认值为.md-fab-progress-bar.color(string): 指定进度条颜色。默认值为#2196f3.backgroundColor(string): 指定按钮背景颜色。默认值为#fff.animationDelay(number): 指定进度条动画延迟时间，单位毫秒。默认值为50.step(number): 指定进度条每次增加的步长，单位为%。默认值为5.speed(number): 指定进度条增加步长的速度，单位为毫秒。默认值为100.
start():void
开始进度条动画。
done():void
完成进度条动画。
示例
假设我们的项目 index.html 文件中引入了 @darkedges/md-fab-progress，并创建了一个如下的按钮和进度条：
<button class="my-fab-progress-button"> 开始上传 </button> <div class="my-fab-progress-bar"></div>
我们可以写一个运行 progress 的方法：
-- -------------------- ---- -------
-------- -------- -
--------------------
--------- --------------------------
------------ -----------------------
------ ---------
--
---------------------
--- -------- - -
--- ----- - -------------- -- -
-------- -- --
------------------------------
----------- --- ---- -
--------------------
------------- -- -
--------------------
-- -----
-
-- -----
-点击按钮后调用 upload() 方法，进度条将开始显示。进度条的显示将从 0% 开始增加，直到达到 100%，此时进度条将停止增加并显示 done 函数所指定的结果。
以上是 @darkedges/md-fab-progress 的一个简单使用教程，在实际项目中，可以根据需要使用此组件进行进度条显示和动画效果的开发，达到更丰富、更直观和更优秀的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b381e8991b448e2f94