前言
在前端开发中，进度条是常见的交互组件。而今天我们要介绍的是一款非常优秀的进度条组件：@npm-polymer/paper-progress。
@npm-polymer/paper-progress是一款Polymer元素，它可以简单的在你的应用程序中创建一个进度条。它可以被用作等待用户操作的反馈，在视觉上强化表单提交的反馈信息，或者与其他元素结合来实时更新长时间运行任务的进度。
安装
你可以使用npm将@npm-polymer/paper-progress组件安装到你的工程中：
npm install @npm-polymer/paper-progress
然后，你就可以在你的代码中引用这个组件了：
<html> <head> <link rel="import" href="node_modules/@npm-polymer/paper-progress/paper-progress.html"> </head> <body> <paper-progress value="0"></paper-progress> </body> </html>
组件参数
@npm-polymer/paper-progress组件有两个重要的参数：value和min。
**value：**该参数定义了进度条的当前值。默认值为0，最大值为1。
**min：**该参数定义了进度条的最小值。默认值为0。
在大多数情况下，你只需要定义value参数。例如，要创建一个进度条，其当前值为50%：
<paper-progress value="0.5"></paper-progress>
组件方法
@npm-polymer/paper-progress组件还有一些帮助方法可以让你更好的使用它：
**increase()：**该方法将当前值增加0.1。
**decrease()：**该方法将当前值减少0.1。
**getRatio()：**该方法获取当前值和最小值之间的比率。
**clamp(value)：**该方法将value值强制限制在最小值和最大值之间。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ------------ --------------------------------------------------------------------
-------
------
--------------- ----------------- ---------------------------
------- --------------------------------------
------- -------------------------------------
--------
-------- -------------- -
--- ----------- - ----------------------------------------
--- -------- - ---------------------- -
----------------- -- ----
-- ------------------ -- -- -
------------------------
-
-- ----
-
-------- ------------- -
--- ----------- - ----------------------------------------
----------------- - --
-
---------
-------
-------上面的代码演示了如何使用@npm-polymer/paper-progress组件来创建一个进度条。当我们点击“开始加载”按钮时，会启动一个定时器来增加进度条的值。当进度条的值达到了1时，定时器就会停止。当我们点击“停止加载”按钮时，进度条的值将被重置为0。
结论
在本文中，我们介绍了如何使用@npm-polymer/paper-progress组件来创建一个进度条。这个组件非常实用，它可以为用户提供非常好的反馈信息。同时，还介绍了组件的参数和方法，并使用示例代码来演示如何使用该组件。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff381e8991b448ddb8e