Saltearse al contenido
Orbit Orbit Orbit

Skeleton

Placeholder de carga — una caja color.surface.sunken con una banda más clara (surface.raised) que barre por encima en un loop lineal de 1400ms (motion.duration.skeleton). Sunken/raised, no field.background/ surface.raised — esos dos quedan blanco puro en modo claro (LightOverrides), lo que dejaba el barrido invisible ahí; sunken se mantiene visiblemente más oscuro que raised en los dos temas. radius.md por defecto — pasá un radio distinto para, por ejemplo, un skeleton circular tipo avatar. Ancho completo del contenedor por defecto — pasá width/--skeleton-width para una línea más corta (ej. un título que no ocupa el 100%).

Uso

<orbit-skeleton style="--skeleton-height: 20px;"></orbit-skeleton>
<orbit-skeleton
  style="--skeleton-height: 14px; --skeleton-width: 70%;"
></orbit-skeleton>
<orbit-skeleton
  style="--skeleton-height: 14px; --skeleton-width: 40%;"
></orbit-skeleton>
<!-- circular: --skeleton-radius: var(--radius-full);
     --skeleton-height: 40px; --skeleton-width: 40px; -->

Circular (con width fijo)

Un avatar cargando: width/--skeleton-width en px (no %) para que el círculo tenga un tamaño fijo en vez de estirarse al ancho del contenedor.

<orbit-skeleton
  style="
    --skeleton-width: 40px;
    --skeleton-height: 40px;
    --skeleton-radius: var(--radius-full);
  "
></orbit-skeleton>

Props

PropTipoDefaultDescripción
width (Kotlin) / custom property --skeleton-width (web)Dp? / css lengthnull (llena el contenedor) / 100%Ancho del placeholder.
height (Kotlin) / custom property --skeleton-height (web)Dp / css length16.dp / 16pxAlto del placeholder.
radius (Kotlin) / custom property --skeleton-radius (web)OrbitRadius / css lengthOrbitRadius.Md / radius.mdRadio de borde — escala cerrada, no Dp crudo.