CSS: progress ​

.instui-progress · 안정적 — 색이 있는 미터, 여러 크기, 선택적 값 레이블을 가진 결정형 진행 바.

.value는 루트의 자식인 .bar의 형제이며 — progress-circle이 자체 .value 부분을 중첩하는 방식과 유사하다. InstUI에는 비결정형(indeterminate) 상태가 없으며; :indeterminate는 pantoken 전용의 추정값(네이티브 <progress>에 value 속성이 없는 경우)으로, .bar을 슬라이딩 세그먼트로 애니메이션하고 의미 있는 숫자가 없으므로 .value을 숨긴다. <meter>에는 비결정형 상태가 없으므로 영향을 받지 않는다.

Source: progress.css

접근성 ​

제로 기반 작업 완료 범위에는 네이티브 <progress>를 사용하고, 최소값이 0이 아닐 경우 <meter>을 사용하세요. 두 요소 중 어느 쪽이든 <label> 내부에 중첩하거나 일치하는 for와 id 값을 통해 별도의 <label>에 연결하여 접근 가능한 이름을 부여하세요.

사용법 ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/progress.css";

예제들 ​

Nested label ​

html
<label>
  Uploading Document: <progress class="instui-progress -color-brand" value="70">70%</progress>
</label>

External label ​

html
<label for="storage-used">Storage used</label>
<meter id="storage-used" class="instui-progress -color-warning" min="20" value="40" max="60">50%</meter>

구조 ​

// Variant: nested-label

text
label
  .instui-progress
    .bar
    .value

// Variant: external-label

text
label
.instui-progress
  .bar
  .value
flowchart TD subgraph sg0 ["nested-label"] n1["label"]:::cssdoc-root n2(".instui-progress"):::cssdoc-part n3(".bar"):::cssdoc-part n4(".value"):::cssdoc-part end subgraph sg5 ["external-label"] n6["label"]:::cssdoc-root n7[".instui-progress"]:::cssdoc-root n8(".bar"):::cssdoc-part n9(".value"):::cssdoc-part end n2 --> n3 n2 --> n4 n1 --> n2 n7 --> n8 n7 --> n9 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

수정자 ​

수정자설명
.-color-brand브랜드 미터 색상.
.-color-danger위험(데인저) 미터 색상.
.-color-info정보 미터 색상.
.-color-inverse어두운 배경용입니다.
.-color-primary-inverse어두운 배경용(기본 반전) 미터 색상.
.-color-success성공 미터 색상.
.-color-warning경고 미터 색상.
.-meter-color-alert더 이상 사용되지 않음 — use .-color-warning.
.-meter-color-brand더 이상 사용되지 않음 — use .-color-brand.
.-meter-color-danger더 이상 사용되지 않음 — use .-color-danger.
.-meter-color-info더 이상 사용되지 않음 — use .-color-info.
.-meter-color-success더 이상 사용되지 않음 — use .-color-success.
.-meter-color-warning더 이상 사용되지 않음 — use .-color-warning.
.-render-value-inside트랙 내부에 .value을 렌더링하며 시작점에 정렬하되 옆에 두지 않는다; 미터 색 위에서 읽기 쉽도록 스타일 지정해야 한다.
.-should-animateInteraction — Animate meter changes over half a second.
.-size-largeLarge. -size-lg의 장기형 별칭.
.-size-lg크게(Large).
.-size-md중간(기본).
.-size-medium중간(기본). -size-md의 장문 별칭입니다.
.-size-sm작음(Small).
.-size-small작음(Small). -size-sm의 장기형 별칭.
.-size-x-small매우 작음(Extra small). -size-xs의 장기형 별칭.
.-size-xs매우 작음(Extra small).

부분 ​

부분설명
.bar채워진 미터 바.
.value바 옆의 값 텍스트.

의사 요소 ​

의사 요소설명
:::indeterminateInstUI의 일부가 아닌 커스텀 동작. 네이티브 <progress>에 value 속성이 없을 때만 적용되며; .bar을 슬라이딩 세그먼트로 애니메이션하고 .value을 숨긴다.
::after트랙의 하단 규칙을 미터 위의 별도 레이어로 그려서 전체 테두리와 하단 테두리가 테마에 따라 독립적으로 유지되도록 한다.

상태 ​

상태설명
:indeterminate—

사용자 정의 속성 ​

속성타입기본설명
--max<number>—최대 진행 값(기본 100).
--min<number>—최소 미터 값(기본 0).
--value<number>—현재 진행 값.
--value-max<number>—@alias {@link --max} 최대 진행 값(기본 100).
--value-now<number>—@alias --value의 별칭입니다.

애니메이션 ​

애니메이션설명
pantoken-progress-indeterminate—

사용된 토큰 ​

Token타입값
--instui-color-background-brand<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-background-error<color>#E62429
--instui-color-background-info<color>#2B7ABC
--instui-color-background-success<color>#03893D
--instui-color-background-warning<color>#CF4A00
--instui-component-progress-bar-border-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-progress-bar-border-color-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-bar-border-radius<length>0.5rem
--instui-component-progress-bar-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-progress-bar-font-weight<integer>400
--instui-component-progress-bar-large-height<length>2rem
--instui-component-progress-bar-line-height<percentage>125%
--instui-component-progress-bar-medium-height<length>1.5rem
--instui-component-progress-bar-medium-value-font-size<length>1rem
--instui-component-progress-bar-meter-color-brand-inverse<color>LightDarklight-dark(#ffffff, #10141A)
--instui-component-progress-bar-small-height<length>1rem
--instui-component-progress-bar-text-color<color>LightDarklight-dark(#576773, #AAB0B5)
--instui-component-progress-bar-text-color-inverse<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-progress-bar-track-bottom-border-color<color>#00000000
--instui-component-progress-bar-track-bottom-border-color-inverse<color>#00000000
--instui-component-progress-bar-track-bottom-border-width<length>0.0625rem
--instui-component-progress-bar-track-color<color>#00000000
--instui-component-progress-bar-track-color-inverse<color>#00000000
--instui-component-progress-bar-value-padding<length>0.5rem
--instui-component-progress-bar-x-small-height<length>0.5rem

브라우저 지원 ​

  • @scope at-rule로 미터 부분 규칙의 범위를 제한함; @scope를 지원하지 않는 브라우저는 해당 범위 규칙을 무시한다.

관련 항목 ​