How to change the loading icon?

Mar 28, 2014

Dear everyone, I would like to know how to change the loading spinner in the output. I've gone through some code and the story_html5.html contains an interesting line:

<span id="loadingSpinner" class="loading"></span>

I can't, however, find "loadingSpinner" or "loading" anywhere else, not in the story_html5.html or anywhere else. Changing the spinner.png in the /mobile directory didn't bear any fruits either. I assumed that the story_html5.html would use the /mobile directory but I'm wrong somewhere. Any help is greatly appreciated!

41 Replies
Ryan DeWitt

Hi Amey, 

Here's an example, it can be done. Keep Trying. View Example 

  1. Publish your file
  2. Open the player.css file in Dreamweaver or text editor 
  3. Search for background:
  4. Swap the long "background:..." code with
    "background: transparent url('preloader.gif') no-repeat 0 0;"
  5. Add an animated GIF named preloader.gif  that's 100 x 100 pixels wide to the same folder as player.css.
  6. Make sure to comment out the rotation code (below) after "background:" in the .loading and .blocked areas to prevent your new preloader for being animated by JS. 

Take your time and Learn what the code is doing. I'll post a video if you still need help. 

Marco Lara

Hi, thanks for investigate about this topic, its very helpful. Actually In storyline 360 doesn't exist player.css and didn't see the spinner.png in any folder inside the publication. Anyone know how to change this icon in storyline360? from modern player or classic player publishing for LMS? I can't understand why articulate don't give the tools to change this particular icon. 5 years ago and still the same. Wow.

This discussion is closed. You can start a new discussion or contact Articulate Support.