CSS: spinner

.instui-spinner — Ένας κινούμενος δακτύλιος φόρτωσης ή περιστρεφόμενος δείκτης AI; δώστε του role="status" και ένα aria-label.

-color-inverse ανανεώνει μόνο το κινούμενο πάνω τμήμα του περιγράμματος, όχι ολόκληρη τη διαδρομή, οπότε εξακολουθεί να διαβάζεται σωστά σε μια σκοτεινή κάρτα χωρίς να απαιτείται ξεχωριστό χρώμα διαδρομής. Οι παραλλαγές AI αντικαθιστούν τον δακτύλιο με το κεντραρισμένο ai-spinner σύμβολο διατηρώντας την ίδια κλίμακα μεγέθους.

Source: spinner.css

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

Δώστε στον δείκτη φόρτωσης role="status" και ένα aria-label ώστε οι αναγνώστες οθόνης να το ανακοινώνουν ως ζωντανή κατάσταση φόρτωσης.

Χρήση

@import "@pantoken/components/components.css";
@import "@pantoken/components/spinner.css";

Παράδειγμα επίδειξης

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

<span class="instui-spinner" role="status" aria-label="Loading"></span>

Inverse color

<div class="instui-view instui-card -background-primary-inverse">
  <span class="instui-spinner -color-inverse" role="status" aria-label="Loading"></span>
</div>

Τροποποιητές

Τροποποιητής	Περιγραφή
.-color-ai	Περιστρεφόμενο αστέρι με διαβάθμιση AI.
.-color-ai-on-color	Περιστρεφόμενο αστέρι AI στο ίδιο χρώμα για μια έγχρωμη ή σκοτεινή επιφάνεια.
.-color-inverse	Σε σκοτεινή επιφάνεια.
.-size-large	Μεγάλο. Μακροσκελής συνώνυμο του -size-lg.
.-size-lg	Μεγάλο.
.-size-sm	Μικρό.
.-size-small	Μικρό. Μακροσκελής συνώνυμο του -size-sm.
.-size-x-small	Εξαιρετικά μικρό. Εκτεταμένο ψευδώνυμο του -size-xs.
.-size-xs	Εξαιρετικά μικρό.

Κινήσεις (animations)

Κίνηση	Περιγραφή
pantoken-spinner-rotate	Περιστρέφει τον δακτύλιο, ή το αστέρι AI με τον πιο αργό ρυθμό των 2.25 δευτερολέπτων.

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

Token	Τύπος	Τιμή
--instui-color-icon-on-color	<color>	#ffffff
--instui-color-stroke-ai-bottom-gradient	<color>	LightDarklight-dark(#00828E, #04A4B7)
--instui-color-stroke-ai-top-gradient	<color>	LightDarklight-dark(#9E58BD, #B680CC)
--instui-component-spinner-color	<color>	LightDarklight-dark(#2369A4, #7FB4F1)
--instui-component-spinner-inverse-color	<color>	#ffffff
--instui-component-spinner-spinner-size-lg	<length>	4.5rem
--instui-component-spinner-spinner-size-md	<length>	3.5rem
--instui-component-spinner-spinner-size-sm	<length>	2rem
--instui-component-spinner-spinner-size-xs	<length>	1rem
--instui-component-spinner-stroke-width-lg	<length>	0.75em
--instui-component-spinner-stroke-width-md	<length>	0.5em
--instui-component-spinner-stroke-width-sm	<length>	0.375em
--instui-component-spinner-stroke-width-xs	<length>	0.25em
--instui-component-spinner-track-color	<color>	LightDarklight-dark(rgba(35,68,101,0.1), rgba(255,255,255,0.1))
--instui-icon-ai-spinner	<image>	url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M11.0621%202.53451C11.3843%201.66389%2012.6157%201.66389%2012.9379%202.53451L15.0815%208.32767C15.1828%208.60139%2015.3986%208.8172%2015.6723%208.91848L21.4655%2011.0621C22.3361%2011.3843%2022.3361%2012.6157%2021.4655%2012.9379L15.6723%2015.0815C15.3986%2015.1828%2015.1828%2015.3986%2015.0815%2015.6723L12.9379%2021.4655C12.6157%2022.3361%2011.3843%2022.3361%2011.0621%2021.4655L8.91849%2015.6723C8.8172%2015.3986%208.60139%2015.1828%208.32767%2015.0815L2.53451%2012.9379C1.66389%2012.6157%201.66389%2011.3843%202.53451%2011.0621L8.32767%208.91849C8.60139%208.8172%208.8172%208.60139%208.91848%208.32767L11.0621%202.53451Z%22%2F%3E%3C%2Fsvg%3E')