免費AI編程助手
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 類更改容器中的文本大?。?/p>
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
動態(tài)進度條
使用 JavaScript 創(chuàng)建動態(tài)進度條：
實例
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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
帶標簽的動態(tài)進度欄
居中標簽：
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
更多建議：