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
Hans Dulpers

Alright, so my research wasn't thorough enough!

I apparently missed the player.css file. It contains no lines with loadingSpinner, but it contains 4 lines with loading. I'll keep this thread updated if I find anything interesting.

EDIT: Alright! While digging through the player.css file, I stumbled upon this little piece of styling:



width: 100px;

height: 100px;

position: absolute;




-webkit-animation-name: rotate;

-webkit-animation-duration: 0.55s;

-webkit-animation-duration: 1s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;


Altering it did affect the little spinner! I changed "width: 100px;" to 500px, saved it and then opened the story_html5.html. The spinner started flying all over the place!

Hans Dulpers

It definitely should be possible. The mystery here is how it is still capable to load the original spinner.png while it has been edited.

On a side note, I noticed that player_compiled.js has 15 lines containing loadingSpinner. It seems like a whole lot to me, plus I have pretty much zero experience with javascript, so I'll investigate that at a later time.

Chris Perez

Try this:

In player.css, change that entire "background: transparent url(.....................) no-repeat 0 0;"

with everything inside the quotes below, but change the image name to what you want to use and place that image in the mobile folder.

"background: transparent url('IMAGE-NAME.gif') no-repeat 0 0;"

AND IT WORKS!!!!!!!!!

Chris Perez

Edited my previous post - but I got it to work!

To make this permanent, go into your C:Program Files(x86)/Articulate Storyline/content/mobile and edit the player.css file that and copy your image into that folder, too, and it shouldn't automatically do this on everything you publish going forward.  Might want to make a backup copy of the player.css file to keep the original, though.

Chris Perez

Joshua Roberts said:

Looks brilliant Chris however the image remained constant even when the module loaded. I had the cute dog background with the head logo merrily spinning away.

It only spun for me in Chrome browser. The settings for the spinning interval, etc. is right below the same code in the player.css, so you might find some other ways to animate it. I didn't play with that.
Alex O'Byrne

Hopefully your still subscribed to this Chris, just messing around with this, managed to get it working after a lot of trial and error, took me a while to figure out that I had to force it load in html5 (duh). I get something weird happen when I use this method, I was using a gif to load as you did but I was also using a gif as a test file within the course, but loading in html 5 using your method to change the spinner, the gif in the course gets distorted, but I can't see why it should or would? 

Example of html5 distortion

Non distortion flash

Any ideas?



Chris Perez

I guess I wasn't subscribed to this, sorry. I'd have to revisit what i did to get it to work to look into it more. I spent an hour or two trying to figure out, so I'd have to dig into it again to re-familiarize myself with it. I looked at the link above and didn't see anything distorted, so I might not understand what issue(s) you might still be having.

Alex O'Byrne

Thanks for getting back to this one, I uploaded to dropbox, (that link works!) to see if it was an issue with the way I forced googledrive to use the html 5 but to no avail. I still get distortion on both IE and Chrome (although I haven't actually checked any other machines). Distorting wise gif in the dropbox link basically has some white pixelation and every now and then flashes a big patch of white pixels, the flash version displays smoothly, no pixelation.

I can't see any reason for this, literally just changed the player.css for the spinner.png and that bit works fine unless there is a html5/gif issue, but a quick google search didn't reveal anything. 

If you don't have time no worries, it was more a point of interest than an essential.

Thanks again for the response.

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