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:
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';

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) {
        }, 1000);

    stopTimer() {
        if (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:

public class TimerBar extends LitTemplate {

    public void start() {

    public void stop() {

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