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
\html5\lib\stylesheets\
folder for the file desktop.min.css in the section for the loader under the element class
.slide-loaderSpecific 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}Asset
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
Basically showing how and where to add it in the added video. With Javascript you need to add the gif to that specific spot in the code, and hide the loading dots. Ofcourse i can make it work, but for now only showing how you can figure it out yourself.