Loader

The Loader provides visual feedback to the user that an action is underway, or complete.

Import

React
Angular
Vue.js

// with @dhl-official/react-library:
import { DhlLoader } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlLoader } from "@dhl-official/ui-libraries/react-library"

If the DUIL has been installed, you can use the web component directly:

<duil311-dhl-loader></duil311-dhl-loader>

If the DUIL has been installed, you can use the web component directly:

<duil311-dhl-loader></duil311-dhl-loader>

Code

React
Angular
Vue.js

<DhlLoader></DhlLoader>

<duil311-dhl-loader></duil311-dhl-loader>

<duil311-dhl-loader></duil311-dhl-loader>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
`currentStep`	`current-step`	An optional prop to set the number of completed steps for the DHL_LOADER.TYPE.RING_STEPS variant	`number`	`undefined`
`dataAriaLabel`	`data-aria-label`	An optional prop for screen reader text to describe the loading state	`string`	`"Loading"`
`dataClassName`	`data-class-name`	An optional prop for the class of the root element.	`string`	`undefined`
`dataId`	`data-id`	An optional prop. Gives a valid HTML ID attribute value for the component.	`string`	`duil311-dhl-loader-${getRandomString()}`
`dataTestid`	`data-testid`	An optional prop. The test id attached to the component as a data-testid attribute.	`string`	`undefined`
`percentage`	`percentage`	An optional prop to set loading percentage for DHL_LOADER.TYPE.RING_PERCENTAGE variant	`number`	`undefined`
`showPercentage`	`show-percentage`	An optional prop to display loading percentage	`boolean`	`true`
`size`	`size`	An optional size prop for the component.	`"lg" \| "md" \| "sm" \| "xl" \| "xs"`	`DHL_LOADER.SIZE.LG`
`totalSteps`	`total-steps`	An optional prop to set the total number of steps for the DHL_LOADER.TYPE.RING_STEPS variant	`number`	`undefined`
`type`	`type`	An optional prop defining the size variant of the Loader	`"ring" \| "ring-done" \| "ring-dual" \| "ring-percentage" \| "ring-steps"`	`DHL_LOADER.TYPE.RING`
`variant`	`variant`	An optional prop to select a component design variant.	`"neutral" \| "on-filled" \| "on-surface" \| "primary" \| "success"`	`DHL_LOADER.VARIANT.PRIMARY`

Loader

Import

Code

Interactive Demo

Readme

Properties

Dependencies

Used by

Depends on

Graph

Import

Code​

Interactive Demo​

Readme​

Properties​

Dependencies​

Used by​

Depends on​

Graph​

Code

Interactive Demo

Readme

Properties

Dependencies

Used by

Depends on

Graph