CSS: progress-circle ​

.instui-progress-circle · stable — วงแหวนความคืบหน้าแบบวงกลมที่ขับเคลื่อนโดยคุณสมบัติที่กำหนดเอง --value และ --value-max.

วงแหวนเป็นโดนัท conic-gradient ที่วาดบน ::before และถูกคลิปด้วยมาสก์ radial-gradient; ส่วนโค้งถูกขับโดย --value หารด้วย --value-max. เพิ่ม -should-animate และโหลดจุดเริ่มต้นอินเตอร์แอคชันเพื่ออนิเมตจากศูนย์เมื่อเมานท์ InstUI ไม่มีสถานะ indeterminate; :indeterminate เป็นการคาดเดาเฉพาะ pantoken (native <progress> โดยไม่มีแอตทริบิวต์ value), หมุนวงแหวนที่มุมคงที่และซ่อน .value เพราะไม่มีตัวเลขที่มีความหมายให้แสดง <meter> ไม่มีสถานะ indeterminate จึงไม่ถูกส่งผลกระทบ.

Source: progress-circle.css

TIP

การปรับปรุง JS — CSS ของคอมโพเนนต์นี้เรนเดอร์และทำงานได้ด้วยตัวเอง; จับคู่กับ @pantoken/interactions เพื่อเพิ่มพฤติกรรมเชิงโต้ตอบ ตัวดัดแปลง -should-animate ถูกขับเคลื่อนโดยพฤติกรรมนั้น ดู ตารางตัวดัดแปลงด้านล่าง.

การเข้าถึง ​

ใช้ native <progress> สำหรับช่วงการทำงานที่เริ่มจากศูนย์ และใช้ <meter> เมื่อค่าต่ำสุดไม่เป็นศูนย์ ให้ชื่อที่เข้าถึงได้แก่แต่ละองค์ประกอบโดยซ้อนภายใน <label> หรือเชื่อมโยงกับ <label> แยกต่างหากผ่านการจับคู่ค่า for และ id.

การใช้งาน ​

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สีมาตรวัดบนพื้นมืด (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-largeใหญ่. ชื่อยาวของ -size-lg.
.-size-lgใหญ่.
.-size-mdขนาดกลาง (ค่าเริ่มต้น).
.-size-mediumขนาดกลาง (ค่าเริ่มต้น). นามแฝงแบบยาวของ -size-md.
.-size-smเล็ก.
.-size-smallเล็ก. ชื่อยาวของ -size-sm.
.-size-x-smallเล็กพิเศษ. ชื่อยาวของ -size-xs.
.-size-xsเล็กพิเศษ.

ส่วนประกอบ ​

ส่วนคำอธิบาย
.valueข้อความค่าที่จัดกึ่งกลางในช่องว่างของวงแหวน.

องค์ประกอบเทียม ​

องค์ประกอบเทียมคำอธิบาย
:::indeterminateกำหนดเอง, ไม่ใช่ส่วนของ InstUI. ใช้ได้เฉพาะกับ native <progress> ที่ไม่มีแอตทริบิวต์ value; หมุน ::before ที่มุมคงที่และซ่อน .value.
::beforeวาดวงแหวนเอง: โดนัท conic-gradient ที่ถูกคลิปด้วยมาสก์รัศมี โดยส่วนโค้งจะติดตามคุณสมบัติที่กำหนดเอง --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 — รูปแบบบาร์เชิงเส้นของ progress แบบ determinate เดียวกัน.