GitHub

Skeleton

PreviousNext

A placeholder bar pulsing while content loads.

New control
InteractiveSkeleton demo
<StackPanel Orientation="Horizontal" Spacing="12" HorizontalAlignment="Left">
  <gpui:Skeleton Width="40" Height="40" CornerRadius="20" />
  <StackPanel Spacing="8" VerticalAlignment="Center">
    <gpui:Skeleton Width="200" />
    <gpui:Skeleton Classes="secondary" Width="140" />
  </StackPanel>
</StackPanel>

Usage

gpui:Skeleton is a bar in the skeleton color, 16px tall and stretching by default, whose opacity runs from 1 to 0.5 and back every two seconds. The shape is the app's, as in GPUI Kit: give it a Width, Height and CornerRadius. secondary draws it at half strength.

Examples

A line, a secondary line, a rounded block, a circle and a card.

Shapes
InteractiveSkeleton demo: Shapes
<StackPanel Spacing="12" HorizontalAlignment="Left">
  <gpui:Skeleton Width="240" />
  <gpui:Skeleton Classes="secondary" Width="240" />
  <gpui:Skeleton Width="200" Height="24" CornerRadius="6" />
  <gpui:Skeleton Width="40" Height="40" CornerRadius="20" />
  <gpui:Skeleton Width="240" Height="120" CornerRadius="8" />
</StackPanel>

Not covered

  • Nothing: the control covers the component.