Skip to main content
NeuralUIv1.14.3New
GitHub
Component

Skeleton

Animated placeholders to simulate content loading. Three variants: text, circle and rectangle.

TypeScript
import { NeuSkeletonComponent } from '@neural-ui/core/skeleton';

Loading card

User list

Stats cards

TypeScript
import { NeuSkeletonComponent } from '@neural-ui/core/skeleton';

@Component({
  imports: [NeuSkeletonComponent],
  template: `
    <!-- Texto / Text -->
    <neu-skeleton variant="text" width="80%" />
    <neu-skeleton variant="text" width="60%" />

    <!-- Círculo (avatar) / Circle (avatar) -->
    <neu-skeleton variant="circle" width="40px" height="40px" />

    <!-- Rectángulo (imagen/card) / Rectangle (image/card) -->
    <neu-skeleton variant="rect" width="100%" height="180px" />

    <!-- Border radius personalizado / Custom border radius -->
    <neu-skeleton width="120px" height="32px" borderRadius="16px" />
  `
})
export class MyComponent {}