Spinner

<afp-spinner>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

Spinners are used to show the progress of an indeterminate operation.

<afp-spinner></afp-spinner>

<afp-spinner></afp-spinner>

<AfpSpinner></AfpSpinner>

<AfpSpinner></AfpSpinner>

Examples #

Color #

The color of the spinner can be adjusted using the --afp-spinner-indicator-color and --afp-spinner-track-color CSS variables.

<afp-spinner style="font-size: 3rem; --afp-spinner-indicator-color: deeppink; --afp-spinner-track-color: pink;"></afp-spinner>

<afp-spinner [style]="'font-size: 3rem; --afp-spinner-indicator-color: deeppink; --afp-spinner-track-color: pink;'"></afp-spinner>

<AfpSpinner style="font-size: 3rem; --afp-spinner-indicator-color: deeppink; --afp-spinner-track-color: pink;"></AfpSpinner>

<AfpSpinner :style="'font-size: 3rem; --afp-spinner-indicator-color: deeppink; --afp-spinner-track-color: pink;'"></AfpSpinner>

Sizes #

Spinners are sized based on the current font size. To change their size, set the font-size property on the spinner itself or on a parent element as shown below.

<div class="afp-cluster afp-align-center">
  <afp-spinner></afp-spinner>
  <afp-spinner style="font-size: 2rem;"></afp-spinner>
  <afp-spinner style="font-size: 3rem;"></afp-spinner>
</div>

<div class="afp-cluster afp-align-center">
  <afp-spinner></afp-spinner>
  <afp-spinner [style]="'font-size: 2rem;'"></afp-spinner>
  <afp-spinner [style]="'font-size: 3rem;'"></afp-spinner>
</div>

<div class="afp-cluster afp-align-center">
  <AfpSpinner></AfpSpinner>
  <AfpSpinner style="font-size: 2rem;"></AfpSpinner>
  <AfpSpinner style="font-size: 3rem;"></AfpSpinner>
</div>

<div class="afp-cluster afp-align-center">
  <AfpSpinner></AfpSpinner>
  <AfpSpinner :style="'font-size: 2rem;'"></AfpSpinner>
  <AfpSpinner :style="'font-size: 3rem;'"></AfpSpinner>
</div>

Speed #

The speed of the spinner can be adjusted using the --afp-spinner-speed CSS variable.

<afp-spinner style="font-size: 3rem; --afp-spinner-speed: 0.5s"></afp-spinner>

<afp-spinner [style]="'font-size: 3rem; --afp-spinner-speed: 0.5s'"></afp-spinner>

<AfpSpinner style="font-size: 3rem; --afp-spinner-speed: 0.5s"></AfpSpinner>

<AfpSpinner :style="'font-size: 3rem; --afp-spinner-speed: 0.5s'"></AfpSpinner>

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`

CSS Custom Properties

Name	Description	Default
`--afp-spinner-track-color`	The color of the track.	`--afp-color-surface-elevated`
`--afp-spinner-indicator-color`	The color of the spinner's indicator.	`--afp-color-brand-50`
`--afp-spinner-speed`	The time it takes for the spinner to complete one animation cycle.	`2s`

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/spinner/spinner.js';