Spinner

Spinner component is a web component that displays a spinner on top of the content. It can be used for loading states or any other type of information that needs to be displayed on top of the content.

Design system docs

 Examples Default spinner 
<dap-ds-spinner></dap-ds-spinner>
Variants

Spinner has different variants to match the design system colors.

<dap-ds-stack direction="row">
    <dap-ds-spinner variant="neutral"></dap-ds-spinner>
    <dap-ds-spinner variant="brand"></dap-ds-spinner>
    <dap-ds-spinner variant="negative"></dap-ds-spinner>
    <dap-ds-spinner variant="positive"></dap-ds-spinner>
    <div style={{ backgroundColor: 'var(--dds-background-brand-base-inverted)'}}>
      <dap-ds-spinner variant="inverted"></dap-ds-spinner>
    </div>
  </dap-ds-stack>
Sizes

Spinner has different sizes to match the design system spacing. You can use the size attribute to set the size of the spinner. The staticSize attribute can be used to set a custom size.

<dap-ds-stack direction="row">
    <dap-ds-spinner size="xs"></dap-ds-spinner>
    <dap-ds-spinner size="sm"></dap-ds-spinner>
    <dap-ds-spinner size="md"></dap-ds-spinner>
    <dap-ds-spinner size="lg"></dap-ds-spinner>
    <dap-ds-spinner size="xl"></dap-ds-spinner>
    <dap-ds-spinner size="xxl"></dap-ds-spinner>
    <dap-ds-spinner staticSize="70"></dap-ds-spinner>
  </dap-ds-stack>
Text

You can add a text to the spinner.

<dap-ds-spinner text="Loading"></dap-ds-spinner>
Importing 
import { DapDSSpinner } from 'dap-design-system/dist/dds'
Importing React 
import { DapDSSpinnerReact } from 'dap-design-system/dist/react'
Slots

No slots available.

Attributes
PropertyTypeDefaultDescription
textstringThe loading text. Optional, default is empty.
sizeIconSize'lg'The size of the spinner. It is based on the icon sizes. Default is lg.
staticSizenumber The size of the spinner in pixels. This overrides the size attribute.
variantSpinnerVariant'neutral'The variant of the spinner. Default is neutral. Can be neutral, brand, negative, positive, or inverted.
Events

No custom events available.

CSS Parts

No CSS parts available.