Loader

Design guidelines

Animated loading indicator, inline or fullscreen.

Code

certara-loader

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

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

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

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

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

Loaders indicate that the content meant for a given container is taking extra time to appear.

Design guidelines

Skeleton loaders

In practice

Spinners

Spinners offer visual feedback to show users an action on a page, or section of a page, is processing. Use a spinner for in-line areas of the interface like a table or list.

Skeleton Loaders

Skeleton loaders mimic the page’s layout by showing its elements in a shape similar to the actual content as it is loading and becoming available. Use skeleton loaders when:

A spinner is not prominent enough, especially on high-traffic pages.
When there’s more than one visible element loading at the same time.
When data takes more than 300ms to load on an average connection.

Accessibility

Spinners are not operable by keyboard.
Use the title value on the spinner image for assistive technologies.
- Screen readers should register that something is “loading” or “processing” when a spinner appears on the screen.
- Users should also be made aware of status changes, such as when the content is “finished” loading or processing.
Screen readers should be able to access the content behind skeleton loaders.
- The image replacements are for decorative presentation only and should be hidden from screen readers with aria-hidden=“true”.

For more information, see our accessibility guidelines.

Design resources

View component in Figma