CSS: progress-circle ​

.instui-progress-circle · stable — یک حلقهٔ پیشرفت دایره‌ای که توسط خصوصیات سفارشی --value و --value-max هدایت می‌شود.

حلقه یک دونات conic-gradient است که روی ::before نقاشی شده و با ماسک radial-gradient برش خورده‌است؛ قوس را --value تقسیم‌بر --value-max هدایت می‌کند. -should-animate را اضافه کنید و نقطهٔ ورود تعاملات را بارگیری کنید تا هنگام mount آن را از صفر انیمیت کند. InstUI حالت نامشخص (indeterminate) ندارد؛ :indeterminate حدسِ بهترینِ فقط‌پانتوکن است (<progress> بومی بدون ویژگی value) که حلقه را با یک قوس ثابت می‌چرخاند و .value را پنهان می‌کند چون عدد معناداری برای نمایش وجود ندارد. <meter> هیچ حالت نامشخصی ندارد، بنابراین تحت تأثیر قرار نمی‌گیرد.

Source: progress-circle.css

TIP

افزایش JS — CSS این کامپوننت خودش رندر می‌کند و مستقل کار می‌کند؛ آن را با @pantoken/interactions جفت کنید تا رفتار تعاملی اضافه شود. مبدل -should-animate توسط آن رفتار هدایت می‌شود. جدول modifierها در پایین را ببینید.

دسترس‌پذیری ​

برای بازهٔ تکمیل وظیفه بر پایهٔ صفر از <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رنگ سنج برای پس‌زمینهٔ تیره (برعکس اصلی).
.-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متن مقدار که در حفرهٔ وسطِ حلقه قرار گرفته است.

نیمه‌عناصر (Pseudo-elements) ​

نیمه‌عنصرتوضیحات
:::indeterminateسفارشی، جزو InstUI نیست. فقط برای <progress> بومی که ویژگی value را ندارد اعمال می‌شود؛ ::before را با یک قوس ثابت می‌چرخاند و .value را مخفی می‌کند.
::beforeخودِ حلقه را می‌کشد: یک دونات conic-gradient که با ماسک رادیال برش خورده و قوس آن متناسب با خصوصیت سفارشی --value دنبال می‌شود.

حالت‌ها ​

وضعیتتوضیحات
:indeterminate—

خواص سفارشی ​

خاصیتنوعپیش‌فرضتوضیحات
--animation-delay<number>—میلی‌ثانیه‌هایی که قبل از شروع انیمیشن mount صبر می‌کند (پیش‌فرض 0).
--max<number>—بیشینهٔ مقدار پیشرفت (پیش‌فرض 100).
--min<number>—کمینهٔ مقدار سنج (پیش‌فرض 0).
--pantoken-pc-fill<color>—رنگ قوس پرشده (سنج)؛ مبدل‌های -color-* آن را تنظیم می‌کنند.
--pantoken-pc-stroke<length>—عرض خط حلقه؛ مبدل‌های -size-* آن را تنظیم می‌کنند.
--pantoken-pc-track<color>—رنگ مسیر پرنشده.
--value<number>—مقدار پیشرفت فعلی؛ با @property ثبت شده تا قابل انتقال (transition) باشد.
--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 — فرم نوار خطیِ همان پیشرفتِ قطعی (determinate).