Skeleton
Placeholder loading indicators for content that hasn't loaded yet.
| Input | Type | Default | Description |
|---|---|---|---|
type | 'line' | 'box' | 'line' | Shape of the skeleton |
width | string | — | Custom width (e.g. '60%') |
Import & Usage
typescript
import { Component } from '@angular/core';
import { NgOatSkeleton } from '@letsprogram/ng-oat/skeleton';
@Component({
selector: 'app-example',
imports: [NgOatSkeleton],
template: `
<ng-oat-skeleton type="line" />
<ng-oat-skeleton type="line" width="60%" />
<ng-oat-skeleton type="box" />
`,
})
export class ExampleComponent {}Line & Box Variants
html
<ng-oat-skeleton type="line" />
<ng-oat-skeleton type="line" width="60%" />
<ng-oat-skeleton type="line" width="40%" />
<ng-oat-skeleton type="box" />Card Loading Placeholder
html
<article class="card">
<header class="flex flex-col gap-3">
<ng-oat-skeleton type="line" width="50%" />
<ng-oat-skeleton type="line" width="80%" />
</header>
<div class="flex flex-col gap-3">
<ng-oat-skeleton type="line" />
<ng-oat-skeleton type="line" />
<ng-oat-skeleton type="line" width="70%" />
</div>
</article>