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