vaadin 14 progress window

Progress circular vaadin bar applie to a button click any idea?:grinning:

something like this you mean?
loading.png

huh, animated gifs don’t seem to work here, weird… But anyway, a button that, when clicked, switches to a “processing” state in which a circular progress indicator is shown, right?

yes sir

if we’re talking about just a “spinner” that rotates and indicates that something is happening, it’s quite easy.

An actual progress circle, that’s like a pie chart but tiny, is a lot more difficult.

So I’ll show you the easy option :slightly_smiling_face:

  1. Apply a static classname to the button for when it’s not spinning (i.e. the spinner is not shown) (e.g. button-with-spinner)

  2. Apply a classname (e.g. spinning) to the button for when you want the spinner to show, which you add (and remove) at some appropriate events.

  3. Add an icon to the button, for example VaadinIcon.SPINNER_THIRD

  4. Add a CSS block defining the rotation animation:

  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}```

5. Add CSS for the spinning and non-spinning states:

vaadin-button.button-with-spinner:not(.spinning) vaadin-icon {
display: none; // Hide the icon when it’s not spinning
}

vaadin-button.spinning vaadin-icon {
animation: rotation 2s infinite linear;
}

There’s CircularProgressBar Flow - Vaadin Add-on Directory for V23; I’m guessing it could be backported for V14

tank u sir i will try and tell the result

it framework support only vaadin 23 only not avilable for vaadin 14 version

Yes, like I said, I’m guessing it could be backported for V14

any other vaadin 14 progressbar sir …

In vaadin 8 i am using this progresswindow it is working fine .i want to remodel it in vaadin 14 it is possible sir i will give u link sir https://github.com/ldelaprade/ProgressWindowForVaadin/blob/master/progresswindow-for-vaadin/src/main/java/org/vaadin/ldl/progresswindow/ProgressWindow.java

I think backporting the circularprogressbar-flow add-on would be the easiest solution. Glancing at the code, I don’t immediately see anything that would be Vaadin 23 specific, so it could be as easy as changing the vaadin.version property in the pom.xml and building a new version out of it. But I don’t think there’s a ready solution for Vaadin 14 that doesn’t involve some amount of manual work.