W3.CSS Progress Bars (进度条)
基本进度条
普通的 <div> 元素可用于进度条。
CSS width 属性可用于设置进度条的高度和宽度。
实例
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
进度栏宽度
使用 CSS width 属性更改进度栏的宽度（从 0 到 100％）：
实例
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
进度条颜色
使用 w3-color 类更改进度条的颜色：
实例
<div class="w3-blue" style="width:75%"></div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
进度条标签
在 w3-container 元素内添加文本，以将标签添加到进度条。
使用 w3-center 类将标签居中。如果省略，它将保持对齐。
实例
<div class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
进度条文字大小
使用 w3-size 类更改容器中的文本大小：
实例
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
进度条填充
使用 w3-padding 类将填充添加到容器中:
实例
<div class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
圆角进度条
使用 w3-round 类将圆角添加到进度条：
实例
<div class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
动态进度条
使用 JavaScript 创建动态进度条：
实例
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
尝试一下 »
点击“尝试一下”按钮查看在线实例
带标签的动态进度栏
居中标签：
实例
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 20;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
</script>
尝试一下 »
点击“尝试一下”按钮查看在线实例
左对齐标签：
实例
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 20;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
</script>
尝试一下 »
点击“尝试一下”按钮查看在线实例
进度条外部的标签：
实例
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 20;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demo").innerHTML = width * 1 + '%';
}
}
}
</script>
尝试一下 »
点击“尝试一下”按钮查看在线实例
另一个示例（高级）：
实例
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= 100) {
clearInterval(id);
document.getElementById("myP").className = "w3-text-green w3-animate-opacity";
document.getElementById("myP").innerHTML = "Successfully uploaded 10 photos!";
} else {
width++;
elem.style.width = width + '%';
var num = width * 1 / 10;
num = num.toFixed(0)
document.getElementById("demo").innerHTML = num;
}
}
}
</script>
尝试一下 »
点击“尝试一下”按钮查看在线实例