2.2 progress简介：如何实现一个环形进度条？

在前端网络操作是异步的，一般都需要一个进度条。在很多应用中，我们经常可以看到环形进度条，但是小程序原生的 progress 组件，是一个从左到右的方形进度条，那么我们可不可以自实现一个环形的进度条呢？

答案肯定是可以的。从原理上来讲，只要我们能够获知网络异步操作的进度，以及绘制出环形动画效果，就可以实现了。

先看一下原生的组件。

在这个代码中，show-info 代表是否在进度条右侧显示百分比文本。一般不需要显示，因为进度条本身就标明了进度。bindtap 用于绑定 tap 事件，所有可视的 view 组件都可以绑定 tap 事件，即使属性列表中没有显式标明。stroke-width 表示进度条的宽度，这是从前进方向来看是宽度，从表象看实则是高度。这个定义与 css 中的 stroke-width 类似。percent 是百分比，在 0~100 之间。active-mode 是动画停止后重新启动的模式，有两个值：backwards， 表示动画从头播；forwards，表示动画从上次结束的位置继续播放，它的默认值是 backwards，但在实践中我们一般使用 forwards。active 表示是否展示动画，与 show-info 一样，布尔属性为真，只需要列上属性就可以了。如果想显式设置为 false，需要写成 active="{{false}}"这样的形式。bindactiveend 用于绑定动画结束的事件，在动画结束时触发。

这里有两个颜色属性需要注意：activeColor 与 backgroundColor。默认情况下，activeColor 是十六进制“#09BB07”，backgroundColor 是十六进制“#EBEBEB”。小程序框架给了开发者修改的自由，但是这个颜色并不能随便使用。程序中的设计风格要保持一致性，这就涉及到应用程序的设计规范问题。

上面的网址，是微信设计规范网址。从上面的颜色规范中，可以看到#09bb07 是默认的 activeColor 颜色。第一个#09bb07 是完成色，第二个#353535 称之为 Semi，大段说明内容而且属于主要内容的，例如正文，使用这个颜色。第三个#888888，称之为 Grey，用于次要内容。第四个是链接色，第五个是警告色。

纯黑色 Black，一般用于主内容。浅灰色 Light，一般用于时间戳与表单的缺省值。

backgroundColor 默认的颜色值#EBEBEB，不在上面的列表之内。在 weui 组件库内，默认按钮的底色是#f2f2f2，这个颜色值和#ebebeb 是很接近的。在使用的时候我们要统一使用一致的颜色，表示相同的含义，在这里我们将 backgroundColor 设置为#f2f2f2。

介绍完组件的属性，接下来我们看开发中经常会遇到哪些问题。

有人在开发者社区问到这个问题，他想实现一个下载文件时显示动态进度条的功能，但看了文档后，发现 percent 这个属性必须设置固定的值，例如 80，但进度是一直变化的，该如何实现动态进度条呢？

我们前面的示例代码基本就可以这个满足需求了。当启用 active、并将 active-mode 设置为 forwards 后，动画就会随下载进度动起来。