Angular Placeholder Component

Placeholder

Use Angular placeholders for your components or pages to indicate something may still be loading.

Available in Other JavaScript Frameworks

CoreUI Angular Placeholder Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

About

Placeholders can be used to enhance the experience of your application. You will, need set some custom widths to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.

Example

In the example below, we take a typical card component and recreate it with placeholders applied to create a “loading card”. Size and proportions are the same between the two.

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  ButtonDirective,
  CardBodyComponent,
  CardComponent,
  CardImgDirective,
  CardTextDirective,
  CardTitleDirective,
  ColDirective,
  PlaceholderAnimationDirective,
  PlaceholderDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-placeholder',
  templateUrl: './placeholder.component.html',
  imports: [
    CardComponent,
    CardImgDirective,
    CardBodyComponent,
    CardTitleDirective,
    CardTextDirective,
    ButtonDirective,
    ColDirective,
    RouterLink,
    PlaceholderAnimationDirective,
    PlaceholderDirective
  ],
  host: { class: 'd-flex justify-content-around p-3' }
})
export class PlaceholderComponent {}

<c-card style="width: 18rem;">
  <img cCardImg="top" loading="lazy" src="/assets/img/angular.jpg" />
  <c-card-body>
    <h5 cCardTitle>Card title</h5>
    <p cCardText>
      Some quick example text to build on the card title and make up the bulk of the
      card&#39;s content.
    </p>
    <a cButton cCol="7" routerLink="./">Go somewhere</a>
  </c-card-body>
</c-card>

<c-card style="width: 18rem;">
  <div cPlaceholderAnimation="glow">
    <svg aria-label="Placeholder" cCardImg="top" cPlaceholder focusable="false" height="162" preserveAspectRatio="xMidYMid slice"
         role="img" width="100%" xmlns="http://www.w3.org/2000/svg">
      <title>Placeholder</title>
      <rect fill="#868e96" height="100%" width="100%"></rect>
    </svg>
  </div>
  <c-card-body cPlaceholderAnimation="glow">
    <h5 cCardTitle>
      <span cCol="6" cPlaceholder></span>
    </h5>
    <p cCardText>
      <span cCol cPlaceholder class="me-1" xs="7"></span>
      <span cCol="4" cPlaceholder class="me-1"></span>
      <span cCol="4" cPlaceholder class="me-1"></span>
      <span cCol="6" cPlaceholder class="me-1"></span>
      <span cCol="8" cPlaceholder class="me-1"></span>
    </p>
    <p>
      <a cButton cCol="7" cPlaceholder color="primary" disabled routerLink="./"></a>
    </p>
  </c-card-body>
</c-card>

How it works

Create placeholders with the cPlaceholder directive and a grid column cCol directive (e.g., cCol=“6”) to set the width. They can replace the text inside an element or be added as a modifier to an existing component.

import { Component } from '@angular/core';
import { ButtonDirective, ColDirective, PlaceholderDirective } from '@coreui/angular';

@Component({
  selector: 'docs-placeholder-2',
  templateUrl: './placeholder-2.component.html',
  imports: [ColDirective, PlaceholderDirective, ButtonDirective]
})
export class Placeholder2Component {}

<p aria-hidden="true">
  <span cCol="6" cPlaceholder></span>
</p>
<button cButton cCol="4" cPlaceholder disabled></button>

The use of aria-hidden="true" only indicates that the element should be hidden to screen readers. The loading behavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some code may be needed to* the state of the placeholder and inform users of the update.

Width

You can change the width through grid column classes, width utilities, or inline styles.

import { Component } from '@angular/core';
import { ColDirective, PlaceholderDirective } from '@coreui/angular';

@Component({
  selector: 'docs-placeholder-width',
  templateUrl: './placeholder-width.component.html',
  imports: [ColDirective, PlaceholderDirective]
})
export class PlaceholderWidthComponent {}

<span cCol="6" cPlaceholder></span>
<span cPlaceholder class="w-75"></span>
<span cPlaceholder style="width: 30%;"></span>

Color

By default, the cPlaceholder uses currentColor. This can be overridden with a custom color or utility class.

import { Component } from '@angular/core';
import { BgColorDirective, ColDirective, PlaceholderDirective } from '@coreui/angular';

@Component({
  selector: 'docs-placeholder-color',
  templateUrl: './placeholder-color.component.html',
  imports: [ColDirective, PlaceholderDirective, BgColorDirective]
})
export class PlaceholderColorComponent {}

<span cCol="12" cPlaceholder></span>

<span cBgColor="primary" cCol="12" cPlaceholder></span>
<span cBgColor="secondary" cCol="12" cPlaceholder></span>
<span cBgColor="success" cCol="12" cPlaceholder></span>
<span cBgColor="danger" cCol="12" cPlaceholder></span>
<span cBgColor="warning" cCol="12" cPlaceholder></span>
<span cBgColor="info" cCol="12" cPlaceholder></span>
<span cBgColor="light" cCol="12" cPlaceholder></span>
<span cBgColor="dark" cCol="12" cPlaceholder></span>

Sizing

The size of cPlaceholder are based on the typographic style of the parent element. Customize them with size prop: lg, sm, or xs.

import { Component } from '@angular/core';
import { ColDirective, PlaceholderDirective } from '@coreui/angular';

@Component({
  selector: 'docs-placeholder-sizing',
  templateUrl: './placeholder-sizing.component.html',
  imports: [ColDirective, PlaceholderDirective]
})
export class PlaceholderSizingComponent {}

<span cCol="12" cPlaceholder cPlaceholderSize="lg"></span>
<span cCol="12" cPlaceholder></span>
<span cCol="12" cPlaceholder cPlaceholderSize="sm"></span>
<span cCol="12" cPlaceholder cPlaceholderSize="xs"></span>

Animation

Animate placeholders with cPlaceholderAnimation="glow" or cPlaceholderAnimation="wave" to better convey the perception of something being actively loaded.

import { Component } from '@angular/core';
import { BgColorDirective, ColDirective, PlaceholderAnimationDirective, PlaceholderDirective } from '@coreui/angular';

@Component({
  selector: 'docs-placeholder-animation',
  templateUrl: './placeholder-animation.component.html',
  imports: [PlaceholderAnimationDirective, ColDirective, PlaceholderDirective, BgColorDirective]
})
export class PlaceholderAnimationComponent {}

<p cPlaceholderAnimation="glow">
  <span cCol="12" cPlaceholder></span>
</p>

<p cPlaceholderAnimation="wave">
  <span cCol="12" cPlaceholder cBgColor="dark"></span>
</p>

API

Placeholder Module

import { PlaceholderModule, GridModule, UtilitiesModule } from '@coreui/angular';

@NgModule({
    imports: [
      PlaceholderModule,
      GridModule,
      UtilitiesModule
    ]
})
export class AppModule() { }

cPlaceholder

directive

jsx

import { PlaceholderDirective } from '@coreui/angular'

Property	Default	Type
cPlaceholder	`false`	`boolean`
Toggle placeholder visibility
cPlaceholderSize	`undefined`	`'xs'`, `'sm'`, `'lg'`
Size the placeholder xs, small, large.

cPlaceholderAnimation

directive

jsx

import { PlaceholderAnimationDirective } from '@coreui/angular'

Property	Default	Type
cPlaceholderAnimation	`undefined`	`'glow'`, `'wave'`
Animation type for placeholder