I have a custom animated SVG loading spinner that I’m trying to center vertically and horizontally.
I followed Darren Pearson’s approach (in this vid tutorial) to adding a custom spinner to a test Hype file.
However, the project I’m working with is responsive and my image is an animated svg, whereas his file was not responsive and the loading screen he made was a .jpg the same size as his Hype document.
It seems like the spinner starts out centered for a brief moment (and it sometimes flashes out from being centered so fast it’s not visible at all) but then it jumps out of position. It’s as though the Hype page size overrides the absolute positioning of the spinner and finishes the preloading with the vertical centering messed up.
This is the code I put in the body of the exported Hype project html file:
And for reference, here is the test Hype file I’m working with (it has a big audio file in it to simulate long page loads). However, I added the above code with a text editor, so in the test Hype file it won’t be present unless it is added manually after export.
I’ve tried a ton of different options and I just can’t figure out how to get it to stay in absolute center throughout the entire loading process!
Does anyone have any idea what can I do to make my spinner stay centered vertically and horizontally (on both mobile and desktop) just like the button that loads in the first screen?
Thanks so much!