javavaadinvaadin-flowvaadin14vaadin23

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


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?


Solution

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