Progress Bar

Whakerexa provides both a native HTML <progress> element, styled by wexa.css, and a JavaScript ProgressBar class for managing dynamic progress updates in application workflows.

HTML element

A <progress> element renders a full-width bar. Set max and value to indicate completion. Always associate a <label> for accessibility.

<label for="file">File progress:</label>
<progress id="file" max="100" value="70">70%</progress>

Variables

Track and fill colors are controlled by theme variables:

ProgressBar JS class

The ProgressBar class manages a visual progress bar and supports two operating modes: Managed mode, driven by application callbacks, and Autonomous mode, using a RequestManager to poll a target URL automatically.

Parameters

Behavior

1. Calls updateCallback or RequestManager.send_post_request() every interval.
2. Updates DOM elements referenced by domIds.percent, domIds.text, domIds.header.
3. Stops automatically when percent >= 100, then calls completeCallback.

Requirements

• A <progress> element with the ID given in domIds.percent.
• A RequestManager instance (autonomous mode) or an updateCallback (managed mode).

Minimal example

const bar = new ProgressBar({
    updateCallback: async () => ({ percent: 50, text: 'Halfway', header: 'Demo' }),
    domIds: { percent: 'my-bar', text: 'my-text', header: 'my-header' },
    completeCallback: () => console.log('Done!')
});
bar.start();

Demo — Managed mode

The application provides an updateCallback that returns { percent, text, header }. The bar polls this callback every intervalMs milliseconds until percent reaches 100.

const bar = new ProgressBar({
    updateCallback: async () => {
        const p = parseInt(el.value, 10) + 10;
        return { percent: p, text: `Processing... ${p}%`, header: 'In progress' };
    },
    domIds: {
        percent: 'percent_progress-managed',
        text:    'progress_text-managed',
        header:  'progress_header-managed'
    },
    completeCallback: () => { msg.textContent = 'Done!'; },
    intervalMs: 1000
});
bar.start();

Demo — Autonomous mode

The bar drives itself by sending POST requests to targetUrl via a RequestManager and reading { percent, text, header } from each response.

const bar = new ProgressBar({
    requestManager: new RequestManager(),
    targetUrl: '/api/progress',
    domIds: {
        percent: 'percent-autonomous',
        text:    'progress_text-autonomous',
        header:  'progress_header-autonomous'
    },
    completeCallback: () => { msg.textContent = 'Done!'; },
    intervalMs: 1000
});
bar.start();

The ProgressBar class is reusable across Whakerexa applications. The same class operates in either mode depending on the constructor parameters supplied.