Skeleton

Name: ng-oat
Author: SashiKumar Yadav

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';

@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="vstack gap-2">
    <ng-oat-skeleton type="line" width="50%" />
    <ng-oat-skeleton type="line" width="80%" />
  </header>
  <div class="vstack gap-2">
    <ng-oat-skeleton type="line" />
    <ng-oat-skeleton type="line" />
    <ng-oat-skeleton type="line" width="70%" />
  </div>
</article>