Components Skeleton

Skeleton

Skeleton components are placeholders that provide a visual indication of where content will appear while it is loading. They help improve user experience by reducing perceived loading time and creating a smoother transition when the actual content is loaded.
Default skeleton
Loading...
heex
            <.skeleton />

        
Image skeleton
Loading...
heex
            <.skeleton kind={:image} />

        
Video skeleton
Loading...
heex
            <.skeleton kind={:video} />

        
Text skeleton
Loading...
heex
            <.skeleton kind={:text} />

        
Card skeleton
Loading...
heex
            <.skeleton kind={:card} />

        
Widget skeleton
Loading...
heex
            <.skeleton kind={:widget} />

        
List skeleton
Loading...
heex
            <.skeleton kind={:list} />

        
Testimonial skeleton
Loading...
heex
            <.skeleton kind={:testimonial} />

        
Properties
elixir
          attr(:kind, :atom,
  default: :default,
  doc: "skeleton",
  values: [:default, :image, :video, :text, :card, :widget, :list, :testimonial]
)