LineaUI.Components.Skeleton (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's skeleton: placeholder blocks shown while the content loads, with a light wave passing over them or a pulse.

<.skeleton class="size-16" shape="circle" />
<.skeleton class="h-3 w-full" />
<.skeleton class="h-48 w-full" shape="square" />

For the pulse, put animation="none" blocks inside an element with animate-pulse (as LineOne does), or give a single block animation="pulse".

Summary

Functions

Renders a placeholder block; its size comes from class.

Functions

skeleton(assigns)

Renders a placeholder block; its size comes from class.

<.skeleton shape="circle" class="size-16" />
<.skeleton class="h-3 w-8/12" />

Attributes

  • animation (:string) - Defaults to "wave". Must be one of "wave", "pulse", or "none".
  • shape (:string) - rounded is LineOne's small radius, lg the large one, square none. Defaults to "rounded". Must be one of "rounded", "pill", "circle", "square", or "lg".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.