ExSkeleton

<VBox class="sapUiMediumMargin" width="100%">
 



<VBox class="sapUiMediumMargin" width="100%">

  <!-- 01 · Variants -->
  <ux7:ExTitle text="01 · Variants — text · rect · circle · card · list · table · form" level="h3" variant="section" />

  <ux7:ExTitle text="Text (3 rows)" level="h4" variant="section" />
  <ux7:ExSkeleton variant="text" rows="3" />

  <ux7:ExTitle text="Rect" level="h4" variant="section" />
  <ux7:ExSkeleton variant="rect" width="100%" height="120px" />

  <ux7:ExTitle text="Circle (avatar)" level="h4" variant="section" />
  <FlexBox gap="1rem">
    <ux7:ExSkeleton variant="circle" width="40px" height="40px" />
    <ux7:ExSkeleton variant="circle" width="56px" height="56px" />
    <ux7:ExSkeleton variant="circle" width="72px" height="72px" />
  </FlexBox>

  <ux7:ExTitle text="Card" level="h4" variant="section" />
  <ux7:ExSkeleton variant="card" />

  <ux7:ExTitle text="List (5 rows)" level="h4" variant="section" />
  <ux7:ExSkeleton variant="list" rows="5" />

  <ux7:ExTitle text="Table (4 columns, 4 rows)" level="h4" variant="section" />
  <ux7:ExSkeleton variant="table" rows="4" columns="4" />

  <ux7:ExTitle text="Form" level="h4" variant="section" />
  <ux7:ExSkeleton variant="form" />

  <!-- 02 · Animation -->
  <ux7:ExTitle text="02 · Animation — wave · pulse · off" level="h3" variant="section" />
  <FlexBox wrap="Wrap" gap="1rem">
    <VBox>
      <ux7:ExText text="Wave (default)" />
      <ux7:ExSkeleton variant="text" rows="2" animation="wave" />
    </VBox>
    <VBox>
      <ux7:ExText text="Pulse" />
      <ux7:ExSkeleton variant="text" rows="2" animation="pulse" />
    </VBox>
    <VBox>
      <ux7:ExText text="No animation" />
      <ux7:ExSkeleton variant="text" rows="2" animated="false" />
    </VBox>
  </FlexBox>

</VBox>

</VBox>