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'

Attributes

Property	Type	Default	Description
`variant`	`"neutral"`, `"brand"` , `"negative"` , `"positive"` , `"inverted"`	`'neutral'`	The variant of the spinner.
`size`	`"xxl"`, `"xl"` , `"lg"` , `"md"` , `"sm"` , `"xs"`	`'lg'`	The size of the spinner.
`staticSize`	`number`, `undefined`		The size of the spinner in pixels. This overrides the size attribute
`text`	`string`		The loading text.
`noColor`	`boolean`	`false`	Removes the text color

Slots

Name	Description
`(default)`	The loading text content.

Events

No custom events available.

CSS Parts

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