Loading indicator in CSS

[noblemaster]

This is a simple loading indicator using a CSS-spinner.

• It shows the spinner from the very beginning before app.js starts being loaded until after all the assets have completed loading.
• I moved the loader for app.js to the end of the index.html, otherwise, the loading indicator won't show until later.
• CSS for #loading-indicator can be customized. It could also show an image or loading bar with progress that could be updated via TeaApplication etc. To e.g. show a progress bar, one could for example add and update a CSS property for width or so (not in there yet).
• In TeaApplication, the loading indicator is removed once everything has loaded.
• Demo: https://www.ageofconquest.com/webapp

[noblemaster]

I put together an idea for the loading bar: https://codepen.io/noblemaster/pen/qBMORQO

• first 25%: we slowly update the bar (getting slower) for when the app.js is loaded. It's hard to tell how long it exactly takes, so a slower progressing bar is probably sufficient (user see that things are still progressing).
• 26%-100%: we can accurately update based on the assets that are loaded. The value is updated withing TeaApplication

[noblemaster]

I updated it with a progress bar. The progress bar goes to 25% when loading the app.js and then shows the correct progress till 100% when loading the assets.

• Progress Bar: https://www.ageofconquest.com/webapp
• Spinner (old): https://www.ageofconquest.com/webapp_OLD

Although it's just a simple progress bar at the moment, we could add configuration options for the CSS part in TeaBuildConfiguration as follows:

• Progress Text: ON/OFF, coloring, font
• Progress Bar: coloring, rounded etc.
• Logo: optional logo, maybe even the libGDX logo by default.
• maybe: even allow to fully modify the CSS part?

[noblemaster]

I added the libGDX logo to the loading bar.

• https://www.ageofconquest.com/webapp_NEW/

I wasn't so sure where to add it during the build. It's now copied with the scripts, but that should probably be changed. Also, it could be made customizable, so someone could have the logo disabled or supply their own in the build configuration file.