怎么用css制作进度条?

html-css011

怎么用css制作进度条?,第1张

如果是百分比的话,可以在进度条span上写样式。

<span style="width:60%"></span>

这个60可以由开发传值过来。

不过建议你把需求说详细一点。

以下是progress的基本标签

根据 w3c 的定义,progress元素代表任务的完成度。一个progress元素标签有开始标签和结束标签。

除了通用的全局属性外,它还拥有两个自己的属性

一个进度条有两种状态:不确定和已确定

Google Chrome, Apple Safari , Opera 浏览器都是webkit内核,设置progress element 元素样式基于 -webkit-appearance: progress-bar

设置progress默认样式,一般简单的设置为 -webkit-appearance: none

对 -webkit-progress-value 属性的背景增加动画

对 -webkit-progress-value 选择器使用动画

使用::before 和 ::after 可以在progress元素上展示进度条的百分比或者准确的数字。

原文地址: https://css-tricks.com/html5-progress-element/