Custom preloading screen that shows progress?

1

I’m wondering if there is any way to show a custom loading screen that shows progress while all the images are being loaded.

I have read this which is great for static images, but shows no way to display progress: http://hype.desk.com/customer/portal/articles/230021-easy-custom-preloader

So is there a way to show an actual progress bar? Ideally in a first scene while I’m preloading all the images for the next scenes?

2

check this link, it might have what you need...

3

Thanks, but you seem to have linked me to a post that is identical to what I mentioned I already read… It only shows how to display a static image, not a progress bar.

4

You might be interested in http://github.hubspot.com/pace/docs/welcome/

5

Thanks, that is interesting. While I can’t use it directly because I will need more customisation for the loading screen, I can try to figure out how they track the progress.

My thoughts of an alternative was to disable “preload” on all images, and create an initial scene in Hype with a loading bar that calls a Javascript function that creates a new Image object for each image in the Resource folder, adding an onLoad listener to each that advances the loading bar’s timeline based on a counter. I assume this would work, as the browser would have all the images cached when Hype needs them in future scenes.

6

css
click inspector
edit html
paste css code
put animation gif to you’r resources folder
and wallah!!! gif always show and play in background
you can hide it as well lil script = none

div { background-image: url('${resourcesFolderName}/myimage.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; -webkit-animation-name: test; -webkit-animation-duration: 3s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-out; }