CSS: progress-circle ​

.instui-progress-circle · stable — --value 및 --value-max 사용자 정의 속성으로 구동되는 원형 진행 링입니다.

링은 conic-gradient 도넛을 ::before에 그린 뒤 방사형 그라디언트 마스크로 잘라내어 생성됩니다; 호는 --value를 --value-max로 나눈 값으로 제어됩니다. -should-animate를 추가하고 인터랙션 진입점을 로드하면 마운트 시 0에서 애니메이션됩니다. InstUI에는 비결정 상태(indeterminate)가 없으므로 :indeterminate는 pantoken 전용의 추정 동작(네이티브 <progress>에 value 속성이 없는 경우)으로, 고정된 호로 링을 회전시키고 의미있는 수치가 없으므로 .value을 숨깁니다. <meter>에는 비결정 상태가 없으므로 영향을 받지 않습니다.

Source: progress-circle.css

TIP

JS 향상 — 이 컴포넌트의 CSS는 자체적으로 렌더링되고 동작합니다; 상호작용 동작을 추가하려면 @pantoken/interactions와 함께 사용하세요. 해당 동작이 이 컴포넌트의 -should-animate 수정자를 제어합니다. 아래의 modifier 표를 참조하세요.

접근성 ​

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

사용법 ​

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

예제들 ​

Nested label ​

html
<label>
  Uploading Document: <progress class="instui-progress-circle -size-sm" value="70">70%</progress>
</label>

External label ​

html
<label for="score">Score</label>
<meter id="score" class="instui-progress-circle -color-success" min="20" value="40" max="60">50%</meter>

구조 ​

// Variant: nested-label

text
label
  .instui-progress-circle
    .value

// Variant: external-label

text
label
.instui-progress-circle
  .value
flowchart TD subgraph sg0 ["nested-label"] n1["label"]:::cssdoc-root n2(".instui-progress-circle"):::cssdoc-part n3(".value"):::cssdoc-part end subgraph sg4 ["external-label"] n5["label"]:::cssdoc-root n6[".instui-progress-circle"]:::cssdoc-root n7(".value"):::cssdoc-part end n2 --> n3 n1 --> n2 n6 --> n7 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-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.
.-shold-animate-on-mountAlias — maps to .-should-animate.
.-should-animateInteraction — Animate the meter, ring, and centered value into place on mount.
.-should-animate-on-mountAlias — maps to .-should-animate.
.-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).

부분 ​

부분설명
.value링의 구멍 중앙에 배치된 값 텍스트.

의사 요소 ​

의사 요소설명
:::indeterminate커스텀이며 InstUI의 일부가 아닙니다. 네이티브 <progress>에 value 속성이 없는 경우에만 적용됩니다; 고정된 호로 ::before를 회전시키고 .value을 숨깁니다.
::before링 자체를 그립니다: 방사형 마스크로 잘린 콘릭 그라디언트 도넛이며, 호는 --value 사용자 정의 속성을 따라갑니다.

상태 ​

상태설명
:indeterminate—

사용자 정의 속성 ​

속성타입기본설명
--animation-delay<number>—마운트 애니메이션을 시작하기 전에 대기할 밀리초(기본 0).
--max<number>—최대 진행 값(기본 100).
--min<number>—최소 미터 값(기본 0).
--pantoken-pc-fill<color>—채워진 호(미터) 색상; -color-* 수정자가 이를 설정합니다.
--pantoken-pc-stroke<length>—링의 스트로크 너비; -size-* 수정자가 이를 설정합니다.
--pantoken-pc-track<color>—비채워진 트랙 색상.
--value<number>—현재 진행 값; 전환 가능한 @property로 등록됩니다.
--value-max<number>—@alias {@link --max} 최대 진행 값(기본 100).
--value-now<number>—@alias --value의 별칭입니다.

애니메이션 ​

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

사용된 토큰 ​

Token타입값
--instui-component-progress-circle-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-progress-circle-color-inverse<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-progress-circle-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-progress-circle-font-weight<integer>600
--instui-component-progress-circle-large-size<length>9em
--instui-component-progress-circle-large-stroke-width<length>0.875em
--instui-component-progress-circle-line-height<percentage>125%
--instui-component-progress-circle-medium-size<length>7em
--instui-component-progress-circle-medium-stroke-width<length>0.625em
--instui-component-progress-circle-meter-color-brand<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-progress-circle-meter-color-brand-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-danger<color>#E62429
--instui-component-progress-circle-meter-color-danger-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-info<color>#2B7ABC
--instui-component-progress-circle-meter-color-info-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-success<color>#03893D
--instui-component-progress-circle-meter-color-success-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-warning<color>#CF4A00
--instui-component-progress-circle-meter-color-warning-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-small-size<length>5em
--instui-component-progress-circle-small-stroke-width<length>0.5em
--instui-component-progress-circle-track-color<color>LightDarklight-dark(#ffffff, #10141A)
--instui-component-progress-circle-track-color-inverse<color>#00000000
--instui-component-progress-circle-x-small-size<length>3em
--instui-component-progress-circle-x-small-stroke-width<length>0.2em

브라우저 지원 ​

  • 숫자형 진행 속성을 @property에 등록하고 CSS mask 및 conic-gradient로 페인팅합니다; 커스텀 속성 전환을 지원하지 않는 환경에서는 링은 렌더링되지만 애니메이션되지 않습니다.

관련 항목 ​

  • progress — 동일한 결정형 진행의 선형 바 형태.