Change the Loading animation

So I had a client that didn’t like the default loading animations so I had to find a way to load a custom one and I didn’t want to edit the style.css after export (I hate to do that, sometimes Ill forget…). There might be an easier way to do this that Im not aware of, but this is how I worked it for now.

Step 1: Create a new css file. I called mine style2.css.
Step 2: Add the following code:

#page-loading-blocs-notifaction{position: fixed;top: 0;bottom: 0;width: 100%;z-index:100000;background:#FFFFFF url(“img/pageload-spinner.gif”) no-repeat center center;}

Step 3: Change the file name to the name of your spinner gif file. Lets say it is my loader.gif you would have:
#page-loading-blocs-notifaction{position: fixed;top: 0;bottom: 0;width: 100%;z-index:100000;background:#FFFFFF url(“img/myloader.gif”) no-repeat center center;}

Step 4: On one of your pages add an image bric. Set the src to your my loader.gif file.
Step 5: Make that image invisible on the main page so users won’t see it.
Step 6: Add the file to your main page by going to page settings, Header File Attachments click on the + and find that file.
Step 6: Export and see the new loading image!

The reason this works is that it is loading after the default style.css the style2.css file then gets loaded with the same css for the loading spinner. If I get a chance Ill do a video for it.

A simpler way to do this might be to just replace the “pageload-spinner.gif” file on the server and set its permissions to ‘444’.


Yeah, I originally did that, but after each export, you have to make sure you either don’t include it or change it again. I dont like the extra steps.

I think you may have missed my point. If you write-protect the file on the server it will not be replaced by future uploads (changed or not).

1 Like

Oh, yeah I did miss that, Ive never tried it. Sounds like a great idea.

I didn’t know you could do that.
Happy me!