CSS: progress ​

.instui-progress · stable — एक निश्चित प्रोग्रेस बार जिसमें रंगीन मीटर, आकार, और वैकल्पिक मान लेबल शामिल है।

.value, .bar का sibling है, दोनों रूट के children हैं — ठीक वैसे ही जैसे progress-circle अपने .value भाग को नेस्ट करता है। InstUI का कोई indeterminate स्टेट नहीं है; :indeterminate pantoken-विशेष एक सर्वोत्तम अनुमान है (नेटिव <progress> बिना value एट्रिब्यूट के), जो .bar को एक स्लाइडिंग सेगमेंट की तरह एनिमेट करता है और .value को छुपा देता है क्योंकि दिखाने के लिए कोई सार्थक संख्या नहीं है। <meter> का कोई indeterminate स्टेट नहीं है, इसलिए वह अप्रभावित है।

Source: progress.css

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

शून्य-आधारित टास्क पूर्णता रेंज के लिये नेटिव <progress> का उपयोग करें और जब न्यूनतम शून्य न हो तब <meter> का उपयोग करें। किसी भी तत्व को सुलभ नाम देने के लिए उसे <label> के अंदर नेस्ट करें या अलग <label> को मेल खाते for और id मानों के माध्यम से संबद्ध करें।

उपयोग ​

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खतरनाक (Danger) मीटर रंग।
.-color-infoसूचनात्मक मीटर रंग।
.-color-inverseअँधेरी पृष्ठभूमियों के लिए।
.-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.
.-render-value-insideट्रैक के अंदर .value को उसके आरंभ के किनारे पर रेंडर करता है, बजाय इसके कि उसके बगल में हो; मीटर के रंग पर पठनीयता के लिए इसे स्टाइल करें।
.-should-animateInteraction — Animate meter changes over half a second.
.-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अतिरिक्‍त छोटा।

पार्ट्स ​

भागविवरण
.barभरा हुआ मीटर बार।
.valueबार के बगल में मान टेक्स्ट।

स्यूडो-एलिमेंट्स ​

स्यूडो-एलिमेंटविवरण
:::indeterminateकस्टम, InstUI का हिस्सा नहीं। केवल उस नेटिव <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 सपोर्ट नहीं है वे उन scoped नियमों को अनदेखा करते हैं।

संबंधित ​

  • progress-circle — उसी निश्चित प्रोग्रेस का वृत्ताकार रूप।