Skeleton

A placeholder bar pulsing while content loads.

ExampleInteractive

Skeleton — Avalonia UIKit

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

View code

#Usage

uikit: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: 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.

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

View code

#Not covered

• Nothing: the control covers the component.