免費(fèi)AI編程助手
W3.CSS Progress Bars (進(jìn)度條)
基本進(jìn)度條
普通的 <div> 元素可用于進(jìn)度條。
CSS width 屬性可用于設(shè)置進(jìn)度條的高度和寬度。
實(shí)例
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
進(jìn)度欄寬度
使用 CSS width 屬性更改進(jìn)度欄的寬度（從 0 到 100％）：
實(shí)例
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
進(jìn)度條顏色
使用 w3-color 類更改進(jìn)度條的顏色：
實(shí)例
<div class="w3-blue" style="width:75%"></div>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
進(jìn)度條標(biāo)簽
在 w3-container 元素內(nèi)添加文本，以將標(biāo)簽添加到進(jìn)度條。
使用 w3-center 類將標(biāo)簽居中。如果省略，它將保持對(duì)齊。
實(shí)例
<div class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
進(jìn)度條文字大小
使用 w3-size 類更改容器中的文本大小：
實(shí)例
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
進(jìn)度條填充
使用 w3-padding 類將填充添加到容器中:
實(shí)例
<div class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
圓角進(jìn)度條
使用 w3-round 類將圓角添加到進(jìn)度條：
實(shí)例
<div class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
動(dòng)態(tài)進(jìn)度條
使用 JavaScript 創(chuàng)建動(dòng)態(tài)進(jìn)度條：
實(shí)例
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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
帶標(biāo)簽的動(dòng)態(tài)進(jìn)度欄
居中標(biāo)簽：
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
左對(duì)齊標(biāo)簽：
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
進(jìn)度條外部的標(biāo)簽：
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
另一個(gè)示例（高級(jí)）：
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
更多建議：