Custom Loading Screens

RinoTheBouncer

Dear Apollo13,
I was wondering if it's possible to make minor alterations to loading screens. I have a vision in mind and I know that scripting is much more complex no matter how plain or simple the idea may look, but I hope you can consider it.

I wish loading screens to be fully white with my logo showing up in the center and a spinning circle (more like a circle which is missing about less than a quarter of it) and a 0-100 counter next to it, both small and located to the bottom-right side of the screen, something like the image I attached.

When the loading finishes, the white screen would get raised up to the top, revealing the page behind it, like a stage curtain, and when one switches to another page, the white screen falls down, covering the existing page and loading the other page..etc.

Thank you!

Air

Hello there:-)


About whole modification - it is out of support scope, as it requires too many changes. I can consider adding different animation to hide preloder screen, for some future update.

About your main needs:

RinoTheBouncer said: circle which is missing about less than a quarter of it

You can use "Flash" Type in Customizing ▸ General settings ▸ Page preloader

RinoTheBouncer said: I wish loading screens to be fully white with my logo showing up in the center

In Customizing ▸ General settings ▸ Page preloader
Set white background color and as background add your logo with option "How to fit background image" set to "just center".

RinoTheBouncer said: and when one switches to another page, the white screen falls down, covering the existing page and loading the other page..etc.

We had something like that in past, but this was breaking Safari browser when user pressed back button, so it won't be added again.

RinoTheBouncer said: small and located to the bottom-right side of the screen

Add such custom CSS:

.preloader-animation {
    height: 30px;
}
.preload-content {
    height: 40px;
    width: 30px;
    padding-top: 0;
    left: auto;
    top: auto;
    margin: 0;
    right: 10px;
    bottom: 10px;
}
.pace-activity {
    width: 20px;
    height: 20px;
    margin-left: -10px;
}

With kind regards.

RinoTheBouncer

This is absolutely amazing. Thank you very much for your help, truly! It would've been great if the 1-100% preloading would be made possible, as it would be more than just an animation and gives the user an idea how far they are (especially since my site will have lots of images). But everything's perfect with these codes. Thank you!

Air

Thanks for another coffee :-) You are very kind.

Percent counter is not so easy to do, as many images are loaded later with lazy load mechanism, however it is good idea.

I like your taste :-)

With kind regards.

RinoTheBouncer

Thanks for the lovely words. And you're most certainly welcome. You deserve everything good for the outstanding theme you made and for bearing with me with those customizations.

It's a great that you let your customers request changes, because of course, we all get impressed by the general look and feel and functionality, but sometimes, we see stuff that inspire us or we have something in mind we want to accomplish, or sometimes little customizations to make the environment suit our need and vision for what a website can be.

Wishing you a wonderful week.

All the best,
R

Air

Thanks to such ideas as yours, this theme can get only better :-)

Just to be clear - these things will not be in upcoming update(tomorrow probably) as I am already closing update and want to release it before our week off will start.

I will try to add these improvements to next update hopefully.

Have a great week also :-)

With kind regards.