Skeleton loader

Show design guidelines

Generic placeholder blocks for loading states. Each variant maps to a fixed layout (circle, card, chart, divider, headline, line, square, or toolbar). Use the height prop, or the variant’s height CSS custom property, when you need a non-default size.

Code

Framework

HTML

React

Angular

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-skeleton-loader variant="circle"></certara-skeleton-loader>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-skeleton-loader variant="card" style="width: 375px;"></certara-skeleton-loader>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-skeleton-loader variant="chart"></certara-skeleton-loader>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-skeleton-loader variant="divider"></certara-skeleton-loader>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-skeleton-loader variant="headline"></certara-skeleton-loader>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-skeleton-loader variant="line"></certara-skeleton-loader>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-skeleton-loader variant="square" style="width: 250px;"></certara-skeleton-loader>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-skeleton-loader variant="toolbar"></certara-skeleton-loader>

certara-skeleton-loader

Properties

`height`


Attribute	`height`
Type	`string`
Default	`undefined`
Required	`false`
Description	Height can accept any valid CSS value

`variant`


Attribute	`variant`
Type	`"card" \| "chart" \| "circle" \| "divider" \| "headline" \| "line" \| "square" \| "toolbar"`
Default	`undefined`
Required	`false`
Description	Choose among the set of skeleton shapes available as variants

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

There are no slots available for this component