# @synerise/ds-loader

> Loader UI Component for the Synerise Design System

Latest version **2.0.2** (published 2026-09-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install @synerise/ds-loader
pnpm add @synerise/ds-loader
yarn add @synerise/ds-loader
bun add @synerise/ds-loader
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2026-09-22 |
| First published | 2020-10-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 44.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | synerise |

## Links

- npm: https://www.npmjs.com/package/@synerise/ds-loader
- Repository: Synerise/synerise-design
- npm.io page: https://npm.io/package/@synerise/ds-loader

## Recent versions

- 2.0.2 (latest) — 2026-09-22
- 2.0.1 — 2026-09-18
- 2.0.0 — 2026-08-26
- 1.0.18 — 2026-07-23
- 1.0.17 — 2026-05-26
- 1.0.16 — 2026-05-04
- 1.0.15 — 2026-04-10
- 1.0.14 — 2026-03-24
- 1.0.13 — 2026-03-23
- 1.0.12 — 2026-01-29
- 1.0.11 — 2025-12-15
- 1.0.10 — 2025-09-25
- 1.0.9 — 2025-09-16
- 1.0.8 — 2025-08-29
- 1.0.7 — 2025-07-24
- … 132 more at https://npm.io/package/@synerise/ds-loader/versions

## README

---
id: loader
title: Loader
---

Loader UI Component

## Installation

```
npm i @synerise/ds-loader
or
yarn add @synerise/ds-loader
```

## Usage

```
import Loader from '@synerise/ds-loader'

<Loader />

```

## Demo

<iframe src="/storybook-static/iframe.html?id=components-loader--default"></iframe>

## API

| Property         | Description                  | Type                     | Default |
| ---------------- | ---------------------------- | ------------------------ | ------- |
| size             | Changing size on Loader      | 'S' / 'M' / 'L'          | M       |
| label            | text of loader               | string / React.ReactNode | -       |
| labelPosition    | Defines the position of text | right / bottom           | right   |
| color            | Changing color of Loader     | 'grey' / 'blue' / 'red' / 'green' / 'yellow' / 'pink' / 'mars' / 'orange' / 'fern' / 'cyan' / 'purple' / 'violet' / string | `grey`  |
| text             | Bold header text above label | React.ReactNode          | -       |
| fontSize         | Font size of text header     | 'small' / 'medium'       | -       |
| percent          | Value passed to percentFormatter | React.ReactNode      | -       |
| percentFormatter | Renders formatted percent beside label | (percent?: React.ReactNode) => React.ReactNode | -       |
| mode             | prop to set loader in center | absolute / undefined     | -       |
| className        | css class name               | string                   | -       |

---
_Source: https://npm.io/package/@synerise/ds-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._