I want to show a progress bar when a button is clicked, and remove it when the action is finished and refreshes/navigates the page.
I have a h:panelGroup
wh
So, you basically want to display it before the webbrowser sends the form submit request to the server and waits for its response. The only way to achieve that is manipulating the HTML DOM tree using JavaScript. You probably already know, JSF is just a HTML code generator and all the webbrowser has at hands it the HTML DOM tree, and that JavaScript runs in webbrowser and is able to listen on UI events which you can specify in a.o. HTML element's on*
attribute.
Given a
<img id="progressbar" src="progress.gif" style="display:none" />
You can show it on click of a command button as below
<h:commandButton ... onclick="document.getElementById('progressbar').style.display='block'" />
Once the page refreshes, it will be display:none
again all by itself.