Forum Discussion

DawnClark2's avatar
DawnClark2
Community Member
13 years ago

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!

11 Replies

  • SandeepSD's avatar
    SandeepSD
    Community Member

    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.

  • MateuszSzuter's avatar
    MateuszSzuter
    Community Member

    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.

    • JacquiDyach's avatar
      JacquiDyach
      Community Member

      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/

      • TimDanes-99d145's avatar
        TimDanes-99d145
        Community Member

        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.

  • JHoog's avatar
    JHoog
    Community Member

    Hi, Is there a solution or fix for this in storyline 360?

  • MarcoLara's avatar
    MarcoLara
    Community Member

    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.