Skeleton

a shimmering placeholder for content that is still loading, in three shapes.

Example

<div class="demo__panel" style="width:280px;display:flex;flex-direction:column;gap:12px">
  <span class="lucent-skeleton lucent-skeleton--block" aria-hidden="true" style="height:64px">
  </span>
  <span class="lucent-skeleton lucent-skeleton--line" aria-hidden="true">
  </span>
  <span class="lucent-skeleton lucent-skeleton--line" aria-hidden="true" style="width:60%">
  </span>
</div>
<span class="lucent-skeleton lucent-skeleton--circle" aria-hidden="true">
</span>

Playground

shape 
 
 
 
Using it
 
 
  
 Angular  lucent-skeleton 
import { LucentSkeleton } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-skeleton 
@design-foundry/lucent-styles/core.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 shape input line | circle | block line line is a text row, circle a 40px avatar, block media (set its height). 
  
 
  
Theming
 
 
 
Color (3)
  
 
Size & spacing (3)
  
 
Border & radius (4)