<progress>元素用于表示任务的进度或状态。它有两个必需的属性：value和max。value属性表示已经完成了多少工作，而max属性表示需要完成多少工作。这两个属性都是数值类型。
以下是一个简单的<progress>元素的例子：
下载进度：<progress value="50" max="100"></progress>
在这个例子中，进度条的值为50%。
通常情况下，进度条需要一些描述性文本来告诉用户当前任务的进度。可以通过给<progress>元素添加一个<span>元素来实现这一点。
<progress value="75" max="100">
<span>正在加载...</span>
</progress>
在这个例子中，<span>元素包含了一段描述性文本：“正在加载...”。
可以使用CSS来自定义进度条的外观。以下是一个自定义样式的例子：
<style>
progress[value] {
width: 100%;
height: 25px;
-webkit-appearance: none;
appearance: none;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 20px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
progress[value]::-webkit-progress-value {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #09c, #f44);
border-radius: 20px;
background-size: 35px 20px, 100% 100%, 100% 100%;
animation: animate-stripes 5s linear infinite;
}
@keyframes animate-stripes {
0% { background-position: 0 0; }
100% { background-position: 60px 0; }
}
</style>
<progress value="75" max="100"></progress>
在这个例子中，使用了CSS来定义进度条的样式。其中，-webkit-appearance: none;和appearance: none;用于去除浏览器默认的样式；::-webkit-progress-bar用于定义进度条的背景颜色和阴影等；::-webkit-progress-value用于定义进度条的颜色和动画效果等。
HTML5的<progress>元素可以用于创建进度条，通过设置value和max属性来表示任务的进度或状态。可以添加一个<span>元素来提供描述性文本，也可以使用CSS来自定义进度条的外观。
本文链接：http://task.lmcjl.com/news/4112.html