17 Replies
Alyssa Gomez

Hey Jonathan! 

That's an interesting idea! I'm not sure I've run across a request for a custom preloader before here in the forums, so this might be a good one to pass along to our development team in the form of a feature request. Feature requests from customers like you contribute to our product roadmap, so thanks for letting us know what you'd like to see. 

Daniel Moore

Hi guys,

Yes, it's possible to do this. One would need to make some slight adjustments to the published folders, so a basic knowledge of css is required. Try this:

1.        Create your custom icon as a GIF – I find GIFs tend to work.

2.       Save this icon into the same folder as the player.css file – this is usually in the mobile folder.

3.       Open the player.css.

4.       Search (ctrl+f) for loading.

5.       Delete the following...:


background: transparent url(data:image/png;base64,… Jggg==) no-repeat 0 0;



...and replace with.



                background: transparent url('yourcustomeloadername.gif') no-repeat 0 0;



6.      Comment out the rotation parameters -  /* */ - if you don’t want it.

7.       Voila. 

shawn woodworth

Hi Daniel. I was very excited to find this article with your instruction on using a customized preloader. I cannot find the player.css in the Articulate Storyline 360 published output. Any way you may be able to assist? It doesn't look like there has been any resolve on this as of yet. Thank you.

Math Notermans

in SL360 the player.css is integrated inside the mobile.min.css and desktop.min.css.

If you search these css files when published for
you will find it.Alas those css-files are minified and thus not good readable. You can make them better readable by using a prettifier like this one..