The first thing i found was the great NProgress.js.
A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!After some former research i noticed PACE.
This library does much more than the normal libraries. It comes with some default collectors that automatically monitor ajax requests, document state or event lags.
So what can PACE do for you?
|Progress Bar in action...|
This is also an update to my former post "Splash Screen".
PACE can automatically show a custom progress animation during a load operations. It automatically monitors jQuery ajax calls, but also the current Document State or long running scripts.
This will work out-of-the-box by including the needed theme (style.css) and js library.
For me the slim version inspired my to replace to OpenUI5 header design element (the blue pixel bar) through the animated progress loader. The used ui5 theme i a little bit modified version of the original flash theme with OpenUI5 color and centered progress indicator.
Inspired by Denise Nepraunigs Tweet concerning code sharing using Plunker, i decided to give it a try, The following example uses a a Fiori like component design and demonstrates how to include PACE in a real life szenario.
Maybe sometimes Plunker seems to slow down, but this is a nice solution to provide Fiori like examples that use multiple files.