DÁP Design System - Spinner webcomponent

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

Property	Type	Default	Description
`text`	`string`		The loading text. Optional, default is empty.
`size`	`IconSize`	`'lg'`	The size of the spinner. It is based on the icon sizes. Default is `lg`.
`staticSize`	`number`		The size of the spinner in pixels. This overrides the size attribute.
`variant`	`SpinnerVariant`	`'neutral'`	The variant of the spinner. Default is `neutral`. Can be `neutral`, `brand`, `negative`, `positive`, or `inverted`.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main spinner container.
`icon`	The loading icon element.
`text`	The loading text element.