Spinner

Basic Usage

Create loading spinners using the k-spinner component.

<k-spinner></k-spinner>

Sizes

Control the spinner size using the size attribute. Options are xs, sm, md (default), lg, and xl.

<k-spinner size="xs"></k-spinner>
<k-spinner size="sm"></k-spinner>
<k-spinner size="md"></k-spinner>
<k-spinner size="lg"></k-spinner>
<k-spinner size="xl"></k-spinner>

Variants

Choose from different spinner styles using the variant attribute. Options are spinner (default), dots, bars, pulse, and ring.

<k-spinner variant="spinner"></k-spinner>
<k-spinner variant="dots"></k-spinner>
<k-spinner variant="bars"></k-spinner>
<k-spinner variant="pulse"></k-spinner>
<k-spinner variant="ring"></k-spinner>

Custom Colors

Customize spinner colors using CSS variables.

<k-spinner style="--spinner-color: var(--c_success)"></k-spinner>
<k-spinner style="--spinner-color: var(--c_danger)"></k-spinner>
<k-spinner style="--spinner-color: var(--c_warning)"></k-spinner>
<k-spinner style="--spinner-color: #9c27b0"></k-spinner>

With Text

Combine spinners with text for loading messages.

<div class="d-f ai-c gap">
  <k-spinner size="sm"></k-spinner>
  <span>Loading...</span>
</div>

Button Loading State

Use spinners inside buttons to indicate loading states.

<button disabled>
  <k-spinner
    size="xs"
    style="--spinner-color: currentColor"
  ></k-spinner>
  Saving...
</button>

<button class="primary" disabled>
  <k-spinner
    size="xs"
    style="--spinner-color: currentColor"
  ></k-spinner>
  Loading...
</button>

JavaScript Reference

Constructor

Extends ShadowComponent

new Spinner()

Requirements

• ShadowComponent

Attributes

size: string

The size of the spinner. Options: xs, sm, md (default), lg, xl.

variant: string

The style variant of the spinner. Options: spinner (default), dots, bars, pulse, ring.

CSS Variables

--spinner-size

The width and height of the spinner. Set automatically based on size attribute.

--spinner-border-width

The border thickness for spinner and ring variants. Set automatically based on size attribute.

--spinner-color

The primary color of the spinner. Default is var(--c_primary).

--spinner-track-color

The background track color for the spinner variant. Default is var(--c_border).