Spinner

A spinner is a visual indicator of an ongoing, user-initiated process. Clarity has two types of spinners, each with its own use case: Page Spinners for tracking the progress of an operation related to an entire page, and Inline Spinners for tracking the progress of an operation related to a specific component.

Examples

Example 1: Default Spinner

The default spinner is centered, large, and has a block display.

<cll-spinner />

Example 2: Size Variations

Spinners can be displayed in different sizes: large (default), medium, and small.

Large (default):

Medium:

Small:

<!-- Large (default) -->
<cll-spinner />

<!-- Medium -->
<cll-spinner [size]="'md'" />

<!-- Small -->
<cll-spinner [size]="'sm'" />

Example 3: Alignment Options

Control the alignment of the spinner using the center input.

Centered (default):

Left-aligned:

<cll-spinner [center]="false" />

Example 4: Custom Styling

Apply custom CSS classes to the spinner for additional styling.

<cll-spinner [center]="false" [class]="'mx-10'" />

Example 5: Inline Spinner

Use the inline input to display the spinner as an inline-block element, useful for aligning spinners within text or other inline elements.

<div>
  <cll-spinner inline [class]="'mx-2'" />
  <span>Loading...</span>
</div>

API Reference

SpinnerComponent

Component for displaying loading spinners.

Inputs

size?: 'lg' | 'md' | 'sm'
Determines the spinner size. Accepts 'lg' (default), 'md', or 'sm'.
center?: boolean
Centers the spinner as a block element (default). Pass false to disable centering.
inline?: boolean
Specifies whether the spinner should be displayed as an inline-block element. Useful for aligning spinners within text or other inline elements.
customClass?: string
A string of additional CSS classes to apply to the spinner.