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

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?

CodePudding user response：

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);
  }
}