요소를 사용할 수 있다.

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-color 클래스를 사용한다.

예제

<div class="w3-light-grey">
  <div class="w3-blue" style="width:75%"></div>
</div>

진행률 표시줄 레이블

진행률 표시줄에 레이블을 추가하려면 w3-container 요소 안에 텍스트를 추가한다.

레이블을 중앙에 배치하려면 w3-center 클래스를 사용한다.
생략하면 왼쪽 정렬된다.

예제

<div class="w3-light-grey">
  <div class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>

진행률 표시줄 텍스트 크기

컨테이너의 텍스트 크기를 변경하려면 w3-size 클래스를 사용한다.

예제

<div class="w3-light-grey w3-xlarge">
  <div class="w3-container w3-green" style="width:50%">50%</div>
</div>

진행률 표시줄 패딩

컨테이너에 패딩을 추가하려면 w3-padding 클래스를 사용한다.

예제

<div class="w3-light-grey">
  <div class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
  </div>
</div>

둥근 진행률 표시줄

진행률 표시줄에 둥근 모서리를 추가하려면 w3-round 클래스를 사용한다.

예제

<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>

라벨이 포함된 동적 진행률 표시줄

중앙 라벨

<div class="w3-light-grey">
  <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button>

왼쪽 정렬 라벨

<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green" style="width:20%">20%</div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button> 
</div>

진행률 표시줄 외부의 라벨

<div class="w3-light-grey">
  <div id="myBar" class="w3-container w3-green" style="height:24px;width:20%"></div>
  </div>

  <p id="demo">20%</p>

  <button class="w3-button w3-green" onclick="move()">Click Me</button> 
</div>

또 다른 예(고급)

<div class="w3-light-grey">
    <div id="myBar" class="w3-container w3-green" style="height:24px;width:0%">
    </div>
  </div>

  <p id="myP">Added <span id="demo">0</span> of 10 photos</p>

  <button class="w3-button w3-light-grey" onclick="move();this.disabled='true'">Upload Photos</button>