Loaders

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

Code

Color 1

Color 2

Property	Attribute	Description	Type	Default
`color1`	`color-1`	Accepts a CSS variable (e.g. `var(--certara-red)`) or a valid CSS color value (name, hex, rgb, rgba, hsl, etc.)	`string`	`undefined`
`color2`	`color-2`	Accepts a CSS variable (e.g. `var(--certara-yellow)`) or a valid CSS color value (name, hex, rgb, rgba, hsl, etc.)	`string`	`undefined`
`fullscreen`	`fullscreen`		`boolean`	`false`
`size`	`size`	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	`string`	`undefined`
`variant`	`variant`		`"circle" \| "hexagon" \| "spinner"`	`'circle'`

graph TD;
  certara-select --> certara-loader
  style certara-loader fill:#f9f,stroke:#333,stroke-width:4px

Property	Attribute	Description	Type	Default
`height`	`height`	Height can accept any valid CSS value	`string`	`undefined`
`variant`	`variant`	Choose among the set of skeleton shapes available as variants	`"card" \| "chart" \| "circle" \| "divider" \| "headline" \| "line" \| "square" \| "toolbar"`	`undefined`