CSS: progress-circle

.instui-progress-circle · stable — Ένας κυκλικός δείκτης προόδου καθοδηγούμενος από τις προσαρμοσμένες ιδιότητες --value και --value-max.

Ο δακτύλιος είναι ένα conic-gradient ντόνατ ζωγραφισμένο σε ::before και κλιπαρισμένο με μάσκα radial-gradient· το --value διαιρούμενο με --value-max καθορίζει την τόξο. Προσθέστε -should-animate και φορτώστε το σημείο εισόδου των interactions για να το κινούμε από το μηδέν κατά το mount. Το InstUI δεν έχει κατάσταση indeterminate· το :indeterminate είναι μια εκτίμηση μόνο για pantoken (native <progress> χωρίς το χαρακτηριστικό value), περιστρέφει τον δακτύλιο σε σταθερό τόξο και κρύβει το .value επειδή δεν υπάρχει ουσιαστικός αριθμός να εμφανιστεί. Το <meter> δεν έχει κατάσταση indeterminate, οπότε δεν επηρεάζεται.

Source: progress-circle.css

TIP

Ενίσχυση JS — Το CSS αυτού του component αποδίδει και λειτουργεί από μόνο του· συνδυάστε το με @pantoken/interactions για να προσθέσετε την διαδραστική συμπεριφορά. Ο τροποποιητής -should-animate καθοδηγείται από αυτή τη συμπεριφορά. Δείτε τον πίνακα τροποποιητών παρακάτω.

Προσβασιμότητα

Χρησιμοποιήστε native <progress> για εύρος ολοκλήρωσης εργασίας που ξεκινάει από μηδέν και <meter> όταν το ελάχιστο δεν είναι μηδέν. Δώστε σε οποιοδήποτε από τα στοιχεία προσβάσιμη ονομασία, εμβάλλοντάς το μέσα σε <label> ή συνδέοντας ένα ξεχωριστό <label> μέσω ταιριαστών τιμών for και id.

Χρήση

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

Παραδείγματα

Nested label

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

External label

<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

label
  .instui-progress-circle
    .value

// Variant: external-label

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	Χρώμα μετρητή για το 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-mount	Alias — maps to .-should-animate.
.-should-animate	Interaction — Animate the meter, ring, and centered value into place on mount.
.-should-animate-on-mount	Alias — 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 κλιπαρισμένη με radial μάσκα, του οποίου το τόξο ακολουθεί την προσαρμοσμένη ιδιότητα --value.

Καταστάσεις

Κατάσταση	Περιγραφή
:indeterminate	—

Προσαρμοσμένες ιδιότητες

Ιδιότητα	Τύπος	Προεπιλογή	Περιγραφή
--animation-delay	<number>	—	Millisec που πρέπει να περιμένει πριν ξεκινήσει η mount animation (προεπιλογή 0).
--max	<number>	—	Η μέγιστη τιμή προόδου (προεπιλογή 100).
--min	<number>	—	Η ελάχιστη τιμή μετρητή (προεπιλογή 0).
--pantoken-pc-fill	<color>	—	Το χρώμα του γεμισμένου τόξου (meter); οι τροποποιητές -color-* το ορίζουν.
--pantoken-pc-stroke	<length>	—	Το πλάτος της πίεσης (stroke) του δακτυλίου· οι τροποποιητές -size-* το ορίζουν.
--pantoken-pc-track	<color>	—	Το χρώμα της μη γεμάτης διαδρομής (track).
--value	<number>	—	Η τρέχουσα τιμή προόδου· εγγράφεται με @property ώστε να μπορεί να μεταβαίνει.
--value-max	<number>	—	@alias {@link --max} Η μέγιστη τιμή προόδου (προεπιλογή 100).
--value-now	<number>	—	@alias Ψευδώνυμο για το --value.

Κινήσεις (animations)

Κίνηση	Περιγραφή
pantoken-progress-circle-indeterminate	—

Καταναλωμένα tokens

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 — Η γραμμική μπάρα της ίδιας ορισμένης προόδου.