Changing/Tweaking Loading Animation

I have a presentation (several, actually) with black backgrounds. Beta users are complaining of the difficulty of seeing the black loading animation (the spinning "thinking" graphic) in the middle of the slide. The standard animation is fine, but the color just won't work.

How can I adjust the color of this animation so users know that something is queuing up instead of thinking their product has frozen? Sorry if this is an obvious fix, I just can't seem to figure it out even after a quick search on the forums.

Thanks!

10 Replies
Ashley Terwilliger

Hi John,

It's not possible to change the color on the loading animation, but you could always submit it as a feature request.  I have seen some threads about building custom progress bars, so it may be possible for you to build a customized loading animation and the community may have some suggestions on how to do so.

Mateusz Szuter

Hello,

quite old topic but I always try to share when I find a solution.

So, yes, it is possible to change loading animation. However, as I'm only developing for HTML5 now, I only know the way for HTML5, and not for flash. Generally editing swf's is ... you know what ;)

And the answer for HTML5 is quite simple. 

1. Open you story_html5 file, then inspect it (ctrl+shift+i) to find following code line (right on the beginning)
<span id="loadingSpinner" ...>
2. Select it and in Styles tab, there is .loading, .blocked class where you have line
background: transparent url(data:base64...longcharacterset) - just click right on the link and click open in new tab - your browser will generate proper loader image for you, save it to your local drive.
3. When you have loader image, you can freely change (with for example photoshop) its color. Or even shape, Go for it! But for further editing you need some knowledge in CSS. 
4. Save your modified loader.png and paste it to your_lesson/mobile/loader.png
5. Now, edit file your_lesson/mobile/player.css and then find a line .loading, .blocked
{background: transparent url(data:base64...longcharacterset) inside it. Replace url(base64 code, all of it) to url(loader.png)
6. If you changed only color - save and enjoy your new loader. If you changed something else, you need more adjustments in CSS file, but if you want to this you, you probably know what to edit.

Tim Danes

Hi Joseph,

No, it doesn't.  I've been doing some research, and I think the 'ground-up' rebuild of the HTML5 engine in Storyline 360 has removed any visibility of the loader visibility that's talked about in these forums.  i.e. there's no 'player.css' etc. to play with.  

I'm not a coder, but I'm interested in the 360 solution too, so anyone with a heads-up around it would be great.

Marco Lara

There is not yet. Please  request it in https://articulate.com/support/contact/feature-request

It is very frustrating that this is a common theme for many years where customers have a specific request and we can not do anything in this modern version, expected to add any feature to customize this, but far from it, restrict the editing that could be done in earlier versions.