I was testing the app for a couple of days now, thinking of ways to further improve it mostly on the front-end side of the application, as it looks so plain. Also from trying to load the site I noticed that sometimes it does not look like it works, just a plain white screen. That might make users quickly, get out of the app without seeing it. It takes time to load sometimes as at every load it queries the database first before displaying.

So I think of ways to solve the problem, I am wanting to spice up the front-end of the app right now and the loader hits some of the problems that I see on the app. Adding a loader with animations, can greatly improve the design, and front-end of the site. Adding the loader can also make up for that slow loading time as I said on the queries on the database.

Creating the Loader

Here is the screen recording of the final loader:

The logo will transition up with the circle loader, the circle loader then fills up with a yellow colored fill. After the circle has been filled with yellow, the loader will transition up the slowly fades out. Revealing the web app. As of now the Web Application Design is plain so it does not catch up with the loader but I am working now on some mock ups, PSD designs, and screens.

The loader has been made with html5, css3, and javascript.

Links

If you want to check out the app, and the new loader head on to this link.
http://ph-steemapp.herokuapp.com
Github Commit: https://github.com/renegade47/ph-steemstats/commit/1756a46121f6ada2f15d62c7e02ed93224b4afb3

Github Proof

Inspiration

https://tympanus.net/codrops/tag/preloader/