Storyline 3 - Player.css

Jun 30, 2017


I was wondering if anyone had any idea where I might find (or if it still exists) the player.css file within a published storyline 3 SCORM package.

Our eLearning content has a black background/theme. Feedback from the end user population indicates that the default loader animation is hard to see. With the player.css file, I was able to include a modified loader that had some colour and would therefore standout against our black background. I know storyline 3 is still relatively new, but any guidance or suggestions would be greatly appreciated!


5 Replies
Pablo Rico

Hi Bridgitte,

This is a late response but hope it can help someone searching the web.

In Storyline 3, changing the course loader icon is very tricky. I am not a super expert and it took me a while to understand it.

What I discovered (mainly focused on HTML5 output):

- The loader is not the typical physical image file you can find in a SCORM/xAPI package but a SVG coded image embedded in your "story_html5.html" file in the CSS class ".slide-loader".

- What I did was to create the new image in Illustrator to keep my image vectorised, ie. small and faster to load.

- Then, I encoded (base64) the image using a URI Generator (in my case I used

- Eventually, I copied the code generated and replaced the attribute 'background:transparent url'  in the class ".slide-loader" mentioned before.  I saved it and zipped the package to see result in the LMS.

Note: the existing loader CSS class uses animation attributes to rotate the image. You can keep it, remove it or replace it. In my case I removed the existing animation -in all the browser engines variants- and embed it in the SVG file using the <animation> methods (good reference manual Doing so I managed to animate different elements of the image instead of the whole image.

I know this is not an easy to implement solution but worked for me. Any suggestion will be very appreciated.



PS: Find attached the SVG image I used as loader. It is the coach's avatar with a progress bar (standalone-animated) and some text to manage waiting time with a heavy learning assets in the beginning.



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