Loader

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

Import

React

// 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"

Angular

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

<dhl-loader></dhl-loader>

Vue.js

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

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

Code

React

<DhlLoader></DhlLoader>

Angular

<dhl-loader></dhl-loader>

Vue.js

<dhl-loader></dhl-loader>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
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	dhl-loader-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
size	size	An optional size prop for the component.	"lg" \| "sm" \| "xl"	DHL_LOADER.SIZE.LG
type	type	An optional prop defining the size variant of the Loader	"ring" \| "ring-done" \| "ring-dual"	DHL_LOADER.TYPE.RING
variant	variant	An optional prop to select a component design variant.	"primary" \| "success"	DHL_LOADER.VARIANT.PRIMARY

Dependencies

Depends on

• dhl-icon

Graph

---

Built by DHL User Interface Library Team!