Customize the Pre-Loader CSS in the current version of Articulate Storyline 360?

Oct 04, 2023

Greetings fellow Instructional Developers!

It's the end of my work day and I come to you with a puzzle.

I've been scouring around the internet looking for a way to try and customize the pre-loader that occurs between slides that require a little more time to load. 

Previous videos (Outdated Method) used to be able to access the story_html5 file and the CSS was not encoded in Base64 back then, so it was relatively easy to find and customize, but now it is not.

I have tried editing the Base64 encoded CSS file within the
folder for the file desktop.min.css in the section for the loader under the element class


Specific Element

.slide-loader{position:absolute;pointer-events:none;left:50%;top:50%;-webkit-animation:spin 1.8s linear infinite;-moz-animation:spin 1.8s linear infinite;-ms-animation:spin 1.8s linear infinite;animation:spin 1.8s linear infinite;width:100px;height:100px;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);z-index:-1;background:rgba(0,0,0,0) url("loader/paperboat.gif") no-repeat center center}

paper boat

So, my question is, can you help this little paperboat make its way into the pre-loader? 

All help would be great, thank you.

1 Reply