Create a timer bar using built-in Vaadin components

I see that Erik Lumme has created a timer bar for Vaadin 10 five years ago:
https://github.com/eriklumme/vaadin-timer-bar
https://github.com/eriklumme/timer-bar.
Thanks, Erik!
I wonder if it’s possible to create a timer bar using built-in Vaadin 24 components nowadays, ideally there would be no server-side thread, only a client-side timer.

If you are okay with using JS, you could try to create a lit based component based on the Vaadin Progressbar

Yes, I had the same idea. Yeah, I think I should be able to figure the JS part out.

@quirky-zebra, here’s a quick draft for reference, the LitElement part:

import {css, customElement, html, LitElement, property} from 'lit-element';
import '@vaadin/vaadin-progress-bar/src/vaadin-progress-bar.js';

@customElement('timer-bar')
export class TimerBar extends LitElement {

    @property({type: Number})
    progressValue = 0;

    timerId: number | null = null;

    startTimer() {
        this.timerId = window.setInterval(() => {
            this.progressValue += 0.01;
            if (this.progressValue > 1) {
                this.stopTimer();
            }
        }, 1000);
    }

    stopTimer() {
        if (this.timerId) {
            window.clearInterval(this.timerId);
            this.timerId = null;
        }
    }

    static get styles() {
        return css`
          :host {
            display: block;
            height: 100%;
            width: 100%;
          }
        `;
    }

    render() {
        return html`
<vaadin-progress-bar value="${this.progressValue}"></vaadin-progress-bar>
`;
    }

    // Remove this method to render the contents of this view inside Shadow DOM
    createRenderRoot() {
        return this;
    }
}

and the Java companion file for Vaadin 14:

@Tag("timer-bar")
@JsModule("./src/timer-bar.ts")
public class TimerBar extends LitTemplate {

    public void start() {
        getElement().executeJs("this.startTimer()");
    }

    public void stop() {
        getElement().executeJs("this.stopTimer()");
    }
}

Any thoughts?

Looks better than using an addon, that’s for sure! Personally I like numbers “next to” loading bars and I would double check if the default progress bar of Vaadin complies to WCAG (I would think so, but haven’t used it) - see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role as reference

Is it possible to create a timer bar using built-in Vaadin components?

Create a timer bar using built-in Vaadin components

Just for reference, the full updated code is here: https://github.com/eriklumme/vaadin-timer-bar/issues/2#issuecomment-1474487723