由于默认的<progress>元素样式往往不是业务需要的,因此我们需要进行额外的样式自定义,此时参考下面的代码进行设置就可以了。
上述代码的效果如图3-41所示。
图3-41 <progress>元素的样式自定义
如果同时希望对不确定态的进度条元素进行样式自定义,则可以使用:indeterminate及背景图像动画来模拟原生的水平来回移动效果,参考CSS代码如下(在上述自定义CSS代码的基础上新增):
上述代码的效果如图3-42所示。
图3-42 <progress>元素不确定态的样式自定义
以上所有代码和截图效果你都可以通过在浏览器中输入地址https://www.htmlapi.cn/3/5-1.html或扫码访问来体验。