Page preloader with content of own choice?

OK - so this morning I gave Steve the one line of JS that makes a loader and did a little CSS.

In the spirit of demystification and to show how it is really nothing that you should be paying for here is a zip file containing a project with a stacks version.

We have a Section that is position fixed in front of the other content. It contains a blueprint SVG to make the spinner. The spinners are all in a zipped folder in there as well and are just from a GitHub repo. Just copy out whichever SVG you want and paste it in.

This project has nothing else in it. The theme is set to Source but you can change that to anything you like.
[EDIT: UPDATED FOR RW8 and with a no script tag in the page body site wide code to hide the loader if JS is disabled]

The JS is in site wide code and has 2 additional lines of variable var statements to allow jQuery to be accessed from Source which does not expose it as it does not necessarily include it. Other themes will not need these variable declarations.

I appear to developed a Geordie spelling of Section in the file name - all good :)

and here is the credit to the source of the loader sag’s:
SVG Loaders - Sam Herbert

3 Likes