Progress Bar

Progress Bar (프로그레스 바)

네이티브 HTML <progress> 요소를 스타일링하는 아주 간단한 CSS 클래스예요. 다양한 색상과 크기로 진행 상태를 표시할 수 있어요.

출처: 문서

본문

Bulma의 프로그레스 바는 네이티브 <progress> HTML 요소를 스타일링하는 간단한 CSS 클래스예요.

Example

<progress class="progress" value="15" max="100">15%</progress>

색상 (Colors)

프로그레스 바 요소는 $colors Sass map에서 정의한 모든 색상을 지원해요.

Example

<progress class="progress is-link" value="15" max="100">
  15%
</progress>

Example

<progress class="progress is-primary" value="30" max="100">
  30%
</progress>

Example

<progress class="progress is-info" value="45" max="100">
  45%
</progress>

Example

<progress class="progress is-success" value="60" max="100">
  60%
</progress>

Example

<progress class="progress is-warning" value="75" max="100">
  75%
</progress>

Example

<progress class="progress is-danger" value="90" max="100">
  90%
</progress>

크기 (Sizes)

Example

<progress class="progress is-small" value="20" max="100">
  20%
</progress>

Example

<progress class="progress is-normal" value="40" max="100">
  40%
</progress>

Example

<progress class="progress is-medium" value="60" max="100">
  60%
</progress>

Example

<progress class="progress is-large" value="80" max="100">
  80%
</progress>

미결정(Indeterminate) 상태

HTML value 속성을 설정하지 않으면 미결정(indeterminate) 프로그레스 바를 표시할 수 있어요. 어떤 진행이 일어나고 있지만 총 시간은 아직 정해지지 않았다는 것을 보여줄 때 사용해요.

Example

<progress class="progress is-small is-primary" max="100">15%</progress>
<progress class="progress is-danger" max="100">30%</progress>
<progress class="progress is-medium is-dark" max="100">45%</progress>
<progress class="progress is-large is-info" max="100">60%</progress>

Sass와 CSS 변수

더 알아보기 (Learn more)

• Notification 요소
• Table 요소