CSS: progress-circle ​

.instui-progress-circle · stable — एक वृत्ताकार प्रगति रिंग जो --value और --value-max कस्टम प्रॉपर्टीज़ द्वारा संचालित है।

रिंग एक conic-gradient डोनट है जिसे ::before पर पेंट किया गया है और radial-gradient मास्क से क्लिप किया गया है; --value को --value-max से विभाजित करने पर आर्क नियंत्रित होता है। एनिमेट करने के लिए इसे ज़ीरो से माउंट पर चलाने हेतु -should-animate जोड़ें और interactions एंट्री प्वाइंट लोड करें। InstUI का कोई indeterminate स्टेट नहीं है; :indeterminate pantoken-विशिष्ट सर्वश्रेष्ठ अनुमान है (नेटिव <progress> बिना value एट्रिब्यूट के), जो रिंग को एक निश्चित आर्क पर घुमाता है और .value को छिपाता है क्योंकि दिखाने के लिये कोई अर्थपूर्ण संख्या नहीं है। <meter> का indeterminate स्टेट नहीं है, इसलिए वह अप्रभावित रहेगा।

Source: progress-circle.css

TIP

JS संवर्धन — इस कंपोनेंट का CSS स्वयं रेंडर करता और काम करता है; इंटरैक्टिव व्यवहार जोड़ने के लिए इसे @pantoken/interactions के साथ जोड़े। इसका -should-animate मोडिफायर उस व्यवहार द्वारा संचालित होता है। नीचे मोडिफायर तालिका देखें।

एक्सेसिबिलिटी ​

शून्य-आधारित टास्क पूर्णता रेंज के लिये नेटिव <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खतरनाक (Danger) मीटर रंग।
.-color-infoसूचनात्मक मीटर रंग।
.-color-primary-inverseडार्क-पर (primary inverse) मीटर रंग।
.-color-successसफलता (Success) मीटर रंग।
.-color-warningचेतावनी (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 का हिस्सा नहीं। केवल उस नेटिव <progress> पर लागू होता है जिसकी value एट्रिब्यूट गायब हो; ::before को एक निश्चित आर्क पर घुमाता है और .value को छिपा देता है।
::beforeखुद रिंग को बनाता है: एक conic-gradient डोनट जिसे radial mask से क्लिप किया गया है, जिसका आर्क --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 — उसी निर्धारित प्रगति का रैखिक बार रूप।