Loader

Show design guidelines

Code

certara-loader

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>

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