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?
The results seem to be good and my spinner is centered vertically and horizontally on mobile and desktop.
Any issues with using the code that I’m using or is there a better way to do it?
By overriding the styling in the main Hype div, it made it so that when I visit the site on mobile, it centered the entire page and never leaves that state.
This is not good because my mobile layout is a very tall page that is meant to load with top:0 positioning and then be able to be scrollable to the rest. Instead, it loads centered and then is not scrollable to anywhere else at all.
So, I’m realizing I should probably not touch the default
styling that is generated when exporting the Hype file.
I feel like I’m missing something simple.
How can I center this small spinner on responsive mobile and desktop (100px by 100px) while not messing with the styling of the main Hype container?
I’ve scoured all of the preloading threads in the forum, including this one, which seems like it’s close to my issue/ But I still don’t have any clarity on why the jumping is happening and how to keep it from happening.
I’m not sure what problem you are hitting, could you perhaps provide a screenshot or video showing it being off?
If I use the code from your second post, it looks centered at all sizes to me.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<title>loaderTest3</title>
<style>
html {
height:100%;
}
body {
background-color:#000000;
margin:0;
height:100%;
}
</style>
<!-- copy these lines to your document head: -->
<meta name="viewport" content="user-scalable=yes, width=600" />
<!-- end copy -->
</head>
<body>
<!-- copy these lines to your document: -->
<div id="loadertest3_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
<div style="
position: absolute !important;
margin: auto !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100px !important;
height: 100px !important;
z-index: 10;
">
<img src="./circles.svg"/>
</div>
<script type="text/javascript" charset="utf-8" src="loaderTest3.hyperesources/loadertest3_hype_generated_script.js?31861"></script>
</div>
<!-- end copy -->
</body>
</html>
(note since you did not provide the .svg I just used one I found online. I also made the z-index higher so I could see it after the Hype document was loaded)
Thanks for the files, I can more clearly see the problem now.
It looks like this is due to a bug in Hype. In v3.0.0 we added the ability for scenes to have differing sizes each, and it looks like there was some code that was explicitly setting the main container div to its pixel size and not paying attention to if it was flexible layout and thus using a percent. This happens nearly immediately before preloading even begins, which is why the dimensions are wrong during the preload phase. Eventually when the scene is loaded after preload is complete, it goes back to correctly using the percent-based sizing.
I’m pretty sure the lines that do this setting can just be yanked out, as the .html code already has the size information anyhow. I’ve made this change, and it should be fixed in v4 (including the next beta build). You’re welcome to join the beta. Alternatively, you should also be able to add a style like this to the head:
