Loader

Show design guidelines

Code

Framework HTML React Angular

Default

Toggle dark mode

<certara-loader></certara-loader>

import { CertaraLoader } from '@certara/certara-ui-react';

<CertaraLoader />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-loader></certara-loader>

Hexagon

Toggle dark mode

<certara-loader variant="hexagon"></certara-loader>

import { CertaraLoader } from '@certara/certara-ui-react';

<CertaraLoader variant="hexagon" />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

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

Spinner

Toggle dark mode

<certara-loader variant="spinner"></certara-loader>

import { CertaraLoader } from '@certara/certara-ui-react';

<CertaraLoader variant="spinner" />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

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

Spinner custom

Toggle dark mode

<certara-loader variant="spinner" size="48px" color-1="var(--theme-brand-600)" color-2="var(--theme-neutral-100)">
</certara-loader>

import { CertaraLoader } from '@certara/certara-ui-react';

<CertaraLoader variant="spinner" size="48px" color-1="var(--theme-brand-600)" color-2="var(--theme-neutral-100)">
</CertaraLoader>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-loader variant="spinner" size="48px" color-1="var(--theme-brand-600)" color-2="var(--theme-neutral-100)">
</certara-loader>

certara-loader

Properties

color1

Attribute	color-1
Type	string
Default	undefined
Required	false
Description	Accepts a CSS variable (e.g. var(--certara-red)) or a valid CSS color value (name, hex, rgb, rgba, hsl, etc.)

color2

Attribute	color-2
Type	string
Default	undefined
Required	false
Description	Accepts a CSS variable (e.g. var(--certara-yellow)) or a valid CSS color value (name, hex, rgb, rgba, hsl, etc.)

fullscreen

Attribute	fullscreen
Type	boolean
Default	false
Required	false
Description

size

Attribute	size
Type	string
Default	undefined
Required	false
Description	Used for variant="spinner" and accepts a value of 24px, 3rem, 128px, or any
other valid CSS size value. The default sizing is inherited from the parent
container

variant

Attribute	variant
Type	"circle" | "hexagon" | "spinner"
Default	'circle'
Required	false
Description

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

Skeleton loaders

Framework HTML React Angular

Circle

Toggle dark mode

<certara-skeleton-loader variant="circle"></certara-skeleton-loader>

import { CertaraSkeletonLoader } from '@certara/certara-ui-react';

<CertaraSkeletonLoader variant="circle" />

// 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>

Card

Toggle dark mode

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

import { CertaraSkeletonLoader } from '@certara/certara-ui-react';

<CertaraSkeletonLoader variant="card" style="width: 375px;" />

// 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>

Chart

Toggle dark mode

<certara-skeleton-loader variant="chart"></certara-skeleton-loader>

import { CertaraSkeletonLoader } from '@certara/certara-ui-react';

<CertaraSkeletonLoader variant="chart" />

// 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>

Divider

Toggle dark mode

<certara-skeleton-loader variant="divider"></certara-skeleton-loader>

import { CertaraSkeletonLoader } from '@certara/certara-ui-react';

<CertaraSkeletonLoader variant="divider" />

// 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>

Headline

Toggle dark mode

<certara-skeleton-loader variant="headline"></certara-skeleton-loader>

import { CertaraSkeletonLoader } from '@certara/certara-ui-react';

<CertaraSkeletonLoader variant="headline" />

// 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>

Line

Toggle dark mode

<certara-skeleton-loader variant="line"></certara-skeleton-loader>

import { CertaraSkeletonLoader } from '@certara/certara-ui-react';

<CertaraSkeletonLoader variant="line" />

// 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>

Square

Toggle dark mode

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

import { CertaraSkeletonLoader } from '@certara/certara-ui-react';

<CertaraSkeletonLoader variant="square" style="width: 250px;" />

// 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>

Toolbar

Toggle dark mode

<certara-skeleton-loader variant="toolbar"></certara-skeleton-loader>

import { CertaraSkeletonLoader } from '@certara/certara-ui-react';

<CertaraSkeletonLoader variant="toolbar" />

// 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