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.
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.
Is it now possible to change the default loading animation and have a custom loading animation instead? One my my client's have put this up as a requirement in their e-Learning courses to be developed with company branded custom loading animation.
There is not yet an option or feature to change the loading animation of the course - but you're welcome to share your thoughts here in the form of a feature request.
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.
You can also upload your revised png to a Base64 encoder, and replace that code in the player.css stylesheet, without having to add the image itself. I used this website: https://www.base64-image.de/
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.
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.
This sounds wonderful. I am curious if I can see a sample of what you have
created for others. Also once you receive my files each week how long does
it take to produce the clip?
Does your team also offer help with Customer Hub? Also customer service
help?
12 Replies
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.
Hi Ashley,
Is it now possible to change the default loading animation and have a custom loading animation instead? One my my client's have put this up as a requirement in their e-Learning courses to be developed with company branded custom loading animation.
Thanks for your help.
Hi Sandeep and welcome to Heroes!
There is not yet an option or feature to change the loading animation of the course - but you're welcome to share your thoughts here in the form of a feature request.
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, .blockedclass where you have linebackground: 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.png5. Now, edit file
your_lesson/mobile/player.cssand then find a line.loading, .blocked{background: transparent url(data:base64...longcharacterset)inside it. Replaceurl(base64 code, all of it)tourl(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.And we always appreciate the share Mateusz as I'm sure other users will as well!
You can also upload your revised png to a Base64 encoder, and replace that code in the player.css stylesheet, without having to add the image itself. I used this website: https://www.base64-image.de/
Does this apply to Articulate Storyline 360 as well?
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.
Hi, Is there a solution or fix for this in storyline 360?
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.
Still hoping there is a solution to soon be found on this.
Hi Alexa,
This sounds wonderful. I am curious if I can see a sample of what you have
created for others. Also once you receive my files each week how long does
it take to produce the clip?
Does your team also offer help with Customer Hub? Also customer service
help?
Thanks,
John