Progress

Import and live example#

One determinate report-loading progress bar at 62 percent.

import {registerAeliqoElements} from "@varendo/web";
import {
  AeliqoAlertElement,
  AeliqoDialogElement,
  AeliqoDrawerElement,
  AeliqoEmptyStateElement,
  AeliqoPopoverElement,
  AeliqoProgressElement,
  AeliqoSkeletonElement,
  AeliqoToastElement,
  AeliqoTooltipElement,
} from "@varendo/web/feedback";



registerAeliqoElements();

const host = document.querySelector<HTMLElement>("#aeliqo-example") ?? (() => {
  const created = document.createElement("div");
  created.id = "aeliqo-example";
  (document.body ?? document.documentElement).append(created);
  return created;
})();

function createCatalogRoot(container: HTMLElement): HTMLElement {
  const root = document.createElement("div");
  root.dataset.catalogSourceRoot = "true";
  root.style.display = "grid";
  root.style.gap = "12px";
  container.append(root);
  return root;
}

function createCatalogElement<T extends HTMLElement>(tagName: string, container: HTMLElement): T {
  const element = document.createElement(tagName) as T;
  element.setAttribute("data-aeliqo-theme", "light");
  container.append(element);
  return element;
}

function appendSlottedText(root: HTMLElement, slot: string, textContent: string): void {
  const content = document.createElement("span");
  content.slot = slot;
  content.textContent = textContent;
  root.append(content);
}

const root = createCatalogRoot(host);
(((root) => {
		const element = createCatalogElement<AeliqoProgressElement>("aeliqo-progress", root);
		element.label = "Loading report";
		element.value = 62;
		element.max = 100;
	}))(root);

Purpose#

Reports an ongoing operation with native progress semantics. A bounded value shows determinate progress; no value stays indeterminate, so nothing is invented.

When to use it#

• The host knows how much of the operation is done.
• The operation is underway but completion is unknown.
• A persistent label should name what is progressing.

When to use a different component#

• Use Skeleton when the shape of pending content matters more than progress.
• Use EmptyState when the operation ended with nothing to show.

Properties and defaults#

Leave value absent for an indeterminate operation; the host owns the operation and completion meaning.

Events#

• None; status is conveyed by progress semantics

States and failure handling#

Relevant states:

• ready
• pending

Expected result: Progress exposes the current bounded value and accessible label without claiming completion.

With no finite value, the component renders an indeterminate progressbar. For determinate progress, it clamps the displayed value to the range from zero to max; an invalid or nonpositive max falls back to 100. The host should report completion only when the underlying operation actually finishes.

Keyboard, focus, and accessibility#

Keyboard behavior:

• Not focusable by default

Exposed semantics:

• aria-label
• aria-valuetext
• progress
• role

Responsive behavior#

The bar follows its host width while the label remains readable. Do not use color alone to report the current value.

Style hooks#

• Shadow parts: label, progress
• Varendo design tokens referenced: --aeliqo-color-accent, --aeliqo-color-border, --aeliqo-space-4

Related components#

• Skeleton
• EmptyState

Generated TypeScript declaration#

export declare class AeliqoProgressElement extends AeliqoFoundationElement {
    static readonly properties: {
        value: {
            type: NumberConstructor;
        };
        max: {
            type: NumberConstructor;
        };
        label: {
            type: StringConstructor;
        };
    };
    static readonly styles: import("lit").CSSResult[];
    value?: number;
    max: number;
    label: string;
    protected render(): import("lit").TemplateResult<1>;
}

Version#

This page documents the Varendo 0.6 component contract.