## `hb-dialog-loader` — dialog-loader

**Category:** overlays | **Tags:** overlays, modal, loading

### What it does

`hb-dialog-loader` is a thin wrapper around **`hb-dialog`**. While **`percentage`** is non-zero, the inner dialog is shown (`show="yes"` on `hb-dialog`); when **`percentage`** is zero, the dialog is hidden (`show="no"`). The body contains a Bulma **`<progress class="progress is-primary">`** whose value matches the rounded percentage (0–100) and a centered label with the same value. The component re-dispatches **`modalShow`** from the inner dialog so the host can track open/close state. The dialog title comes from the **`title`** prop or the **`title`** slot.

**Dependency:** `hb-dialog` (registered by the component build).

### Custom element

`hb-dialog-loader`

### Attributes / props (snake_case)

Web component attributes are strings. Use numeric strings for **`percentage`** (for example `"45"`). Booleans elsewhere in the stack follow your host conventions; this component only drives inner visibility from **`percentage`**.

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Present in the public `Component` typings; not forwarded to `hb-dialog` in the current implementation. |
| `style` | string (optional) | Present in typings; the implementation does not currently wire this to the inner dialog (see `component.wc.svelte`). |
| `title` | string (optional) | Default dialog title when the `title` slot is empty. Default text in code: `loading`. |
| `percentage` | number / numeric string (required) | Progress 0–100. **`0`** (or equivalent) hides the loader; any other value shows the dialog and fills the bar. String values are parsed with `parseInt` in an effect. |

### CSS custom properties

Documented in `extra/docs.ts` **`styleSetup.vars`** (Bulma on `:host`), plus spacing used in `styles/webcomponent.scss`:

| Variable | Description |
| --- | --- |
| `--bulma-primary` | Progress value color (Bar uses `is-primary`). |
| `--bulma-border-weak` | Progress track background. |
| `--bulma-text` | Percentage label text color. |
| `--bulma-block-spacing` | Used for spacing above the percentage label (`margin-top: calc(var(--bulma-block-spacing) * 0.5)`). |

Additional **`--bulma-*`** tokens from Bulma’s progress and typography setup apply on `:host` (see [Bulma CSS variables](https://bulma.io/documentation/features/css-variables/)).

### CSS parts

| Part | Description |
| --- | --- |
| *(none)* | No `::part` surface is exposed here; the inner `hb-dialog` owns its own parts (for example `modal-dialog` on `hb-dialog`). |

### Slots

| Slot | Description |
| --- | --- |
| `title` | Content for the dialog title area (inner `hb-dialog` title slot). If empty, the **`title`** prop is used. |

### Events (`CustomEvent` names)

- **`modalShow`** — `{ id: string; show: boolean }` — Forwarded from the inner **`hb-dialog`** when it opens or closes.

### Usage notes

- Drive **`percentage`** from your async work (upload, batch job, etc.): keep it updated until the task finishes, then set it to **`0`** to dismiss.
- The progress element exposes **`aria-valuenow`**, **`aria-valuemin`**, **`aria-valuemax`**, and a **`title`** attribute with the rounded percentage for a simple native tooltip.
- Overlay behavior (backdrop, body scroll, focus) follows **`hb-dialog`**; test in real browsers if you nest or stack modals.
- There is no i18n block in `extra/docs.ts` for this package.

### Minimal HTML example

```html
<hb-dialog-loader title="Uploading…" percentage="45"></hb-dialog-loader>
```

### Closing the loader

```html
<hb-dialog-loader percentage="0"></hb-dialog-loader>
```

When **`percentage`** is zero, the wrapper sets the inner dialog’s **`show`** to **`no`**, so the loader is not visible.