进度条的功能的实现可以用多种方式，例如现在我们经常使用的php程序，也有使用html/css来实现的，今天小编给大家讲解一种简单的HTML标签就可以花式写出进度条：
这个可能是一些同学还不太清楚的，HTML5 原生提供了两个标签
和 ：用来显示已知范围的标量值或者分数值
常见的一种方式是使用背景色配合百分比的方式制作进度条。
这种方式优势在于使用简单，实际进度可以非常方便的传递进 CSS 中
利用 HTML style 属性填写完整的 width 值，譬如
或者利用 CSS 自定义属性
配合实际 CSS 中的 width: var(--progress)
完全的自定义样式，以及可以轻松的添加辅助丰富的动画和交互效果
同样的，我们可以利用 HTML style 属性填写完整的 background 值传递实际百分比，当然，这里更推荐使用 CSS 自定义属性传值：
div class="g-progress" style="--progress: 50%">
.g-progress {
background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
}
熟悉 CSS 的同学会发现一个目前这种方式的弊端，在于当修改 --progress 的值的时候，即便给 .g-progress 添加了 transition，也不会有过渡动画效果。
原因在于，CSS 中，渐变（诸如 linear-gradinet、radial-gradient、conic-gradient）都是不支持过渡变换的。
角向渐变实现圆弧进度条的局限性
当然，这个方法有两个弊端。
