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.