CSS: skeleton-loader

.instui-skeleton-loader — Διακοσμητικό δείγμα κράτησης για περιεχόμενο που δεν έχει φορτωθεί ακόμα.

TIP

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

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

Σημειώστε τον διακοσμητικό φορτωτή aria-hidden="true". Τοποθετήστε aria-busy στην περιοχή γονικού περιεχομένου, με αρχικά κενή κατάσταση και ειδοποίηση έξω από αυτή την περιοχή. Χρησιμοποιήστε initSkeletonLoading από το πακέτο interactions για να ανακοινώσετε την κατάσταση φόρτωσης του γονέα. Τα σχήματα δεν πρέπει να λαμβάνουν εστίαση.

Χρήση

@import "@pantoken/plugin-custom-components/custom-components.css";

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

<div style="display: flex; align-items: center; gap: 1rem; max-inline-size: 24rem">
  <div class="instui-skeleton-loader -type-avatar" aria-hidden="true">
    <div class="shape"></div>
  </div>
  <div style="flex: 1">
    <div class="instui-skeleton-loader -type-text -size-md" aria-hidden="true">
      <div class="skeleton-row" style="inline-size: 45%"><div class="shape"></div></div>
      <div class="skeleton-row" style="inline-size: 72%"><div class="shape"></div></div>
    </div>
  </div>
</div>

Δομή

.instui-skeleton-loader
  .shape
  .skeleton-row (0..n)
    .shape

flowchart TD n0[".instui-skeleton-loader"]:::cssdoc-root n1(".shape"):::cssdoc-part n2(".skeleton-row"):::cssdoc-part n3(".shape"):::cssdoc-part n0 --> n1 n2 --> n3 n0 -->|0..n| n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

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

Τροποποιητής	Περιγραφή
.-size-lg	Μεγάλη σειρά κειμένου.
.-size-md	Μέση σειρά κειμένου (προεπιλεγμένο).
.-size-sm	Μικρή σειρά κειμένου.
.-size-xl	Εξαιρετικά μεγάλη σειρά κειμένου.
.-size-xs	Εξαιρετικά μικρή σειρά κειμένου.
.-size-xxl	Μεγαλύτερη σειρά κειμένου.
.-size-xxs	Σειρά κειμένου σε μέγεθος υπομνήματος.
.-type-avatar	Στρογγυλό δείγμα κράτησης avatar, μόνο μεσαίο μέγεθος.
.-type-image	Δείγμα κράτησης εικόνας, μόνο μεσαίο μέγεθος.
.-type-text	Μπάρα κειμένου (προεπιλεγμένο).

Μέρη

Μέρος	Περιγραφή
.shape	Η κομμένη επιφάνεια δείγματος κράτησης με μέγεθος προσαρμοσμένο στον επιλεγμένο τύπο φορτωτή.
.skeleton-row	Επαναλαμβανόμενος περιέκτης σειρών κειμένου που εφαρμόζει κάθετο κενό.

Ψευδοστοιχεία

Ψευδοστοιχείο	Περιγραφή
::before	—

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

Ιδιότητα	Τύπος	Προεπιλογή	Περιγραφή
--pantoken-skeleton-sweep	<percentage>	0%	—

Κινήσεις (animations)

Κίνηση	Περιγραφή
pantoken-skeleton-sweep	—

Συνθήκες

Τύπος	Ερώτημα	Περιγραφή
media	(prefers-reduced-motion: reduce)	—

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

Token	Τύπος	Τιμή
--instui-component-skeleton-loader-avatar-border-radius	<length>	999rem
--instui-component-skeleton-loader-background-color	<color>	LightDarklight-dark(#8D959F, #5F6E7A)
--instui-component-skeleton-loader-bezier	—	0.42, 0, 0.58, 1
--instui-component-skeleton-loader-duration	<time>	1500ms
--instui-component-skeleton-loader-image-border-radius	<length>	0.5rem
--instui-component-skeleton-loader-shimmer-color	<color>	LightDarklight-dark(#AAB0B5, #737F8A)
--instui-component-skeleton-loader-text-border-radius	<length>	0.25rem
--instui-component-skeleton-loader-text-height-lg	<length>	1.75rem
--instui-component-skeleton-loader-text-height-md	<length>	1.5rem
--instui-component-skeleton-loader-text-height-sm	<length>	1.25rem
--instui-component-skeleton-loader-text-height-xl	<length>	2rem
--instui-component-skeleton-loader-text-height-xs	<length>	1rem
--instui-component-skeleton-loader-text-height-xxl	<length>	2.25rem
--instui-component-skeleton-loader-text-height-xxs	<length>	0.75rem
--instui-component-skeleton-loader-text-padding-lg	<length>	0.21875rem
--instui-component-skeleton-loader-text-padding-md	<length>	0.1875rem
--instui-component-skeleton-loader-text-padding-sm	<length>	0.15625rem
--instui-component-skeleton-loader-text-padding-xl	<length>	0.25rem
--instui-component-skeleton-loader-text-padding-xs	<length>	0.125rem
--instui-component-skeleton-loader-text-padding-xxl	<length>	0.28125rem
--instui-component-skeleton-loader-text-padding-xxs	<length>	0.1875rem
--instui-size-interactive-height-md	<length>	2.5rem
--pantoken-skeleton-height	<length>	1.5rem
--pantoken-skeleton-padding	<length>	0.1875rem
--pantoken-skeleton-radius	<length>	0.25rem