How do I display the indeterminate spinner ProgressBar in Vaadin Flow?

Question

Below is the code to display an indeterminate ProgressBar in Vaadin Flow (version 23):

ProgressBar spinner = new ProgressBar();
spinner.setIndeterminate(true);
spinner.setVisible(true);

The only thing is that this now seems to create a ProgressBar that goes back and forth and I'm wondering if it's possible to have it display as a circle. I could do it by loading an Icon, an animated GIF and so on, but is it possible through the ProgressBar class?

score 5 · Accepted Answer · answered Aug 12 '22 at 17:42

Bending some component to your will might just be a waste of time. Flow allows extremely easy integration of HTML/CSS/JS, so just create your own spinner (there are many examples out there).

E.g.

Spinner:

@CssImport('./spinner.css')
@Tag('spinner')
class Spinner extends Div {}

And the spinner.css:

spinner {
    width: 4em;
    height: 4em;
    display: inline-block;
    position: relative;
    border: 5px solid blue;
    border-color: blue transparent transparent transparent;
    border-radius: 50%;
    animation: spinner-animation 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes spinner-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

How do I display the indeterminate spinner ProgressBar in Vaadin Flow?

1 Answers1