진행 바
진행 바는 과정에서 얼마나 멀리 사용자에 따라 표시 할 수 있습니다 :
기본 진행 바
W3 진행중인 컨테이너 클래스는 진행률 표시 줄의 컨테이너를 정의하고, W3-진행 막대는 실제 진행률 표시 줄 (이하 "충전"영역)를 정의합니다. CSS의 폭 속성을 사용하여 진행률 표시 줄의 폭을 설정합니다 :
예
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:10%"></div>
</div>진행률 표시 줄 크기
0에서 100 %로 백분율 값으로 진척 바의 폭 / 크기를 설정합니다 :
예
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:50%"></div>
</div>진행률 표시 줄 색상
기본적으로 W3 진행 컨테이너의 색상은 밝은 회색과 W3-진행 막대가 회색입니다 :
W3.CSS 색상 클래스의 자신의 색상을 변경합니다 :
예
<div class="w3-progress-container
w3-light-blue">
<div class="w3-progressbar
w3-blue" style="width:75%"></div>
</div>둥근 진행 바
진행 막대에 둥근 모서리를 추가 할 수 W3 라운드 클래스 중 하나를 사용 :
예
<div class="w3-progress-container w3-round">
<div
class="w3-progressbar w3-round" style="width:25%"></div>
</div>진행률 표시 줄 레이블
진행 표시 줄에 레이블을 추가하려면 "W3-의 ProgressBar"내부에 새로운 요소를 추가합니다.
팁 : 항상 중심의 레이블을 유지하기 위해 W3 센터 클래스를 사용합니다. 생략 된 경우, 왼쪽 정렬됩니다.
예
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:25%">
<div class="w3-center w3-text-white">25%</div>
</div>
</div>동적 진행률 표시 줄
동적 진행률 표시 줄을 만드는 자바 스크립트를 사용합니다 :
예
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:1%"></div>
</div>
<button class="w3-btn" onclick="move()">Click Me</button>
<script>
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>라벨 동적 진행률 표시 줄
중심 라벨 :
왼쪽 정렬 레이블 :
진행률 표시 줄의 외부 레이블 :