W3.CSS 진행률 표시줄
진행률 표시줄을 사용하여 사용자가 진행 중인 프로세스의 정도를 표시할 수 있습니다.
20%
기본 진행률 표시줄
진행률 표시줄에는 일반 <div> 요소를 사용할 수 있습니다.
CSS 너비 속성은 진행률 표시줄의 높이와 너비를 설정하는 데 사용할 수 있습니다.
예시
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
진행률 표시줄 너비
CSS 너비 속성 을 사용하여 진행률 표시줄의 너비를 변경합니다 (0에서 100%로).
예시
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
진행률 표시줄 색상
w3- 색상 클래스를 사용 하여 진행률 표시줄의 색상을 변경합니다.
예시
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
진행률 표시줄 레이블
진행률 표시줄에 레이블을 추가하려면 w3-container 요소 내부에 텍스트 를 추가합니다.
w3-center 클래스를 사용 하여 레이블을 중앙에 배치합니다. 생략하면 왼쪽 정렬됩니다.
25%
50%
75%
예시
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
진행률 표시줄 텍스트 크기
w3- size 클래스를 사용 하여 컨테이너의 텍스트 크기를 변경합니다.
50%
50%
50%
예시
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
진행률 표시줄 패딩
w3-padding 클래스를 사용 하여 컨테이너에 패딩을 추가합니다.
25%
25%
25%
예시
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
둥근 진행률 표시줄
w3-round 클래스를 사용 하여 진행 표시줄에 둥근 모서리를 추가합니다.
25%
25%
25%
예시
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
동적 진행률 표시줄
JavaScript를 사용하여 동적 진행률 표시줄 만들기:
예시
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green"
style="height:24px;width:1%"></div>
</div>
<button class="w3-button w3-light-grey" 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>
레이블이 있는 동적 진행률 표시줄
중앙 레이블:
예시
20%
왼쪽 정렬 레이블:
예시
20%
진행률 표시줄 외부의 레이블:
예시
20%
다른 예(고급):
예시
Added 0 of 10 photos