1、首先我们打开Sublime Text软件，在软件中新建一个html文档，并且搭建html的基本结构，如下图所示
2、然后我们在body区域添加如下图所示的div内容，这里的class样式后面进行定义
3、然后我们新建style标签，在style标签中定义刚才写的样式名称，如下图所示，这里先定义circle-left
4、然后我们定义circle-right的样式和circle-box的样式，如下图所示
5、最后运行界面程序我们就会在页面中看到如下图所示的圆形的进度条
6、最后如果你要改变进度条的进度值的话只需要设置transform属性里面的rotate值即可，如下图所示
7、综上所述，在HTML中制作圆形进度条主要运用了最新的CSS3中的transform等属性，大家快自己尝试一下吧