I know that a few make Pre-loader stacks, like @webdeer Paddy Balls. But, I want to make my own, in that I want to have my own content appear.
How easy/hard is this?
p.o.p
1 Like
There is loads of pre loader demo code if you look around.
Although you need a slow framework and the more bad habits the better, to see a pre loader in action. There are many experts in this who can guide you.
I looked at a lot, almost none seem to work now!
To be fair, all frameworks will load fast enough that you should never see a loader. Zipped and minified, most have a footprint of only 60-100kB. It is the stuff that is added after that kills pages - mainly images and external calls to instagram, twitter and other feeds.
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
Ohh, now that’s pretty bloody handy! Thank you!
And to address a few points above, about page speed and things… In a style inspired by Swiss Tony…
A website is like a beautiful woman, and the loading of that website is like a beautiful woman getting herself ready to go out. You don’t really want to see her during this process, you just want to be presented with the finished beautiful article.
Now I realise as I write that that it’s all wrong in this day and age, but it’s funny, so I’m going to leave it there.
My point is, pages load in bits, the header bit might get loaded first, then some colours, then some columns, then some images, and so on. This might happen really quickly, but most of the time the user will see it happen. In some instances i don’t want this. I don’t want the user to see the beautiful lady go thru the process of getting ready, I just want them to see the finished article.
So I sometimes like to add a pre-loader, so as to get that “tadaah” moment when the page is revealed.
tl;dr
A page loader is blinds/drapes for all you website Peeping Tom’s.
1 Like
By the way… What I really need to do now is make an animated SVG of the word “Brewing…” with the dots missing in the first frame, then one dot getting added about every 200ms. Then I can set the delay to 800ms and I got me a cool custom loader.
Where should I go to do that SVG?
I’m available at my consultancy rate so get your house on the market
3 Likes
Stop avoiding the bathroom.
Back in the office now, and if anyone is interested to see this in action…
I’ve added a bit of animation to a regular header stack instead of using an SVG. Once I’ve worked out how to make the SVG, I’ll swap it.
Is it a bit annoying? Possible!
Yes it’s a bit annoying but it would be less so if it pulsed a bit - indicates that it is doing something
Tav, my one scales up. Ooooeer Misses!
One thing to add for anyone thinking of using text, like a header stack or summit… You get that really annoying thing where the text loads in a standard font, then flips to the theme font. SVG might be the way to go.
I know it scales up but then it leaves you wondering if anything is happening. It should scale up and then pulse a little - that would need a keyframe animation in CSS.
Gotchya. I was hoping that the fade out starts before the scale up ends. I’ll tweak it.
Hmmm- can you add some more JS or something to your site? It loaded so fast on my phone that the word Brewing was almost subliminal â…“ of a second, maybe.
This is odd…
That page takes ages to load as it has loads of videos on it.
For me at least, the animated SVG “hangs” until the page is loaded in the background, then it animates for the duration set in the JS code, then fades.
Shouldn’t work like that, should it?
Edit… Think some thing is wrong with that page as my fans are going nuts when it loads. Rebuild in order perhaps.
Done some more testing, from what I can tell any SVG animation waits for the page to load in the background before commencing animation.
Disable JS in your browser and look at the page again. The SVG is animating correctly. The problem with the page is that the other JS loading is render blocking the SVG. If I were of a mind I could point out the irony in that :)
1 Like