Mobile Loading Animation



I need to create a progress circle/bar in a page that loads for around 20 seconds to mimic a loading animation. This should be activated after a button is clicked, then is visible for the time taken to load, which should trigger the visibility of a few widgets.

Is this possible?


Hi Tommy,

First, and most obvious, a page that takes 20 seconds to load is a disaster UX-wise. You really should reconsider refactoring the page.

Secondly, if you use an Ajax Submit for the button, you get an Ajax Refresh animation out of the box (if you use one of the standard themes, otherwise you need to explicitely add it from RichWidgets). Also, if you want certain widgets to appear, an Ajax Refresh of the elements after the loading of data is all you need.

Hi Tommy,

If you are using an icon to like a spinner you can put the style class to 

"icon fa-spin"

hope it helps.

Hi Tommy, 

You can try my component:

It accepts 2 parameters on the webblock:

1. ShowProgress (boolean)

2. ProgressText (text)

Make sure to put this webblock as the very first item/top item in Content placeholder.

You can create a local boolean Screen variable and bind it to ShowProgress input parameter. 

Then manipulate this variable to show or hide Progress Spinner.

Make sure also to hide Progress Spinner on exception (use All Exceptions Handler).

Hope it helps...