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).

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

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

Closing the loader

<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.