Slim Progress Bar

Some days ago i was looking for a nice YouTube like slim progress bar animation effect.

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.

OpenUI5 currently does not fully support asynchronous loading of library components and widgets. I am using the loader directives "preload=async" to be able to see the loader while the rest of the core lib is loading. In a larger app using the router, a switch to a different page will load the needed views and controllers synchron. This does not allow PACE to start the progress animation because all other javascript is blocked. Upcomming SDK 1.26.x is internally refactored to allow a better AMD approach, but the current concept does not allow to be totally asynchron (sadly today).

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.

Have Fun...