Customizing Storyline preloader animation - html

Question

Most e-learning developers are familiar with the Storyline loader.
Here is the loader:
There's nothing wrong with the loader but I want to replace it with my own CSS loader animation!
Now I want to know how to add My Loader Animation CSS Code to Storyline's CSS Code.
In other words, I want to add My Loader Animation CSS to Storyline's CSS Code.
Here is My Loader Animation CSS Code:
<div class="lds-css ng-scope"><div style="width:100%;height:100%" class="lds-ellipsis"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div><style type="text/css">#keyframes lds-ellipsis3 {
0%, 25% {
left: 32px;
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
left: 32px;
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
left: 100px;
}
100% {
left: 168px;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes lds-ellipsis3 {
0%, 25% {
left: 32px;
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
left: 32px;
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
left: 100px;
}
100% {
left: 168px;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes lds-ellipsis2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
#-webkit-keyframes lds-ellipsis2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
#keyframes lds-ellipsis {
0% {
left: 32px;
-webkit-transform: scale(0);
transform: scale(0);
}
25% {
left: 32px;
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
left: 100px;
}
75% {
left: 168px;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
left: 168px;
-webkit-transform: scale(0);
transform: scale(0);
}
}
#-webkit-keyframes lds-ellipsis {
0% {
left: 32px;
-webkit-transform: scale(0);
transform: scale(0);
}
25% {
left: 32px;
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
left: 100px;
}
75% {
left: 168px;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
left: 168px;
-webkit-transform: scale(0);
transform: scale(0);
}
}
.lds-ellipsis {
position: relative;
}
.lds-ellipsis > div {
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
}
.lds-ellipsis div > div {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f00;
position: absolute;
top: 100px;
left: 32px;
-webkit-animation: lds-ellipsis 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
animation: lds-ellipsis 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
}
.lds-ellipsis div:nth-child(1) div {
-webkit-animation: lds-ellipsis2 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
animation: lds-ellipsis2 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
background: #1875e5;
}
.lds-ellipsis div:nth-child(2) div {
-webkit-animation-delay: -5s;
animation-delay: -5s;
background: #499255;
}
.lds-ellipsis div:nth-child(3) div {
-webkit-animation-delay: -2.5s;
animation-delay: -2.5s;
background: #f2b736;
}
.lds-ellipsis div:nth-child(4) div {
-webkit-animation-delay: 0s;
animation-delay: 0s;
background: #c5523f;
}
.lds-ellipsis div:nth-child(5) div {
-webkit-animation: lds-ellipsis3 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
animation: lds-ellipsis3 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
background: #1875e5;
}
.lds-ellipsis {
width: 200px !important;
height: 200px !important;
-webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}
</style></div>
And here is the Storyline's CSS Code:
<style rel="stylesheet" data-noprefix>.slide-loader{position:absolute;pointer-events:none;left:50%;top:50%;width:500px;height:500px;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);z-index:10000;background:transparent url("loader.gif") no-repeat center center}.mobile-chrome-warning{position:fixed;width:300px;height:75px;bottom:0px;background:rgba(0,0,0,0.0001);display:none;pointer-events:none;z-index:99}.mobile-chrome-warning-btn{position:absolute;left:-16px;top:-15px;width:107px;height:107px;background:rgba(0,0,0,0.6);border-radius:50%;border:1px solid rgba(255,255,255,0.2);pointer-events:all;-webkit-transform:scale(0.6)}.mobile-chrome-warning-btn svg{position:absolute;left:60%;top:58%;-webkit-transform:translate(-50%, -50%)}.mobile-chrome-warning-bubble{position:relative;color:white;padding:10px;background:rgba(0,0,0,0.8);border-radius:5px;float:left;margin-left:100px;margin-top:15px;pointer-events:none}.mobile-chrome-warning-bubble:before{position:absolute;top:8.5px;left:-20px;width:30px;height:30px;content:'';display:block;width:0;height:0;border-style:solid;border-width:12.5px 20px 12.5px 0;border-color:transparent rgba(0,0,0,0.8) transparent transparent;pointer-events:none}.is-mobile .swipe-resume-arrow{position:fixed;top:30%;left:50%;-webkit-transform:translate(-50%, 0);width:12%}.is-mobile .mobile-chrome-warning-text{position:fixed;top:56%;left:50%;-webkit-transform:translate(-50%, 0);height:30%;width:80%;line-height:43px;text-align:center;color:#aeb7bd;word-break:break-word;font-size:20px}.slide-loader .mobile-loader-dot{display:none}#-ms-keyframes spin{from{-ms-transform:translate(-50%, -50%) rotate(0deg)}to{-ms-transform:translate(-50%, -50%) rotate(360deg)}}#-moz-keyframes spin{from{-moz-transform:translate(-50%, -50%) rotate(0deg)}to{-moz-transform:translate(-50%, -50%) rotate(360deg)}}#-webkit-keyframes spin{from{-webkit-transform:translate(-50%, -50%) rotate(0deg)}to{-webkit-transform:translate(-50%, -50%) rotate(360deg)}}#keyframes spin{from{transform:translate(-50%, -50%) rotate(0deg)}to{transform:translate(-50%, -50%) rotate(360deg)}}body.is-mobile{background:black !important}body.is-theme-unified{background:#1b1a1a}.is-mobile .load-container,.is-theme-unified .load-container{position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1;visibility:visible;-webkit-transition:visibility 250ms, opacity 250ms linear;-moz-transition:visibility 250ms, opacity 250ms linear;-mz-transition:visibility 250ms, opacity 250ms linear;transition:visibility 250ms, opacity 250ms linear;pointer-events:none}.is-mobile .hide-slide-loader .load-container,.is-theme-unified .hide-slide-loader .load-container{opacity:0;visibility:hidden}.is-mobile .slide-loader,.is-theme-unified .slide-loader{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none;background:none;text-align:center;width:120px;height:80px;top:60%}.is-theme-unified .slide-loader{top:50%}.is-mobile .slide-loader .mobile-loader-dot,.is-theme-unified .slide-loader .mobile-loader-dot{width:30px;height:30px;background-color:white;border-radius:100%;display:inline-block;-webkit-animation:slide-loader 1s ease-in-out 0s infinite both;-moz-animation:slide-loader 1s ease-in-out 0s infinite both;-ms-animation:slide-loader 1s ease-in-out 0s infinite both;animation:slide-loader 1s ease-in-out 0s infinite both}.is-mobile .slide-loader .dot1,.is-theme-unified .slide-loader .dot1{-webkit-animation-delay:-0.2s;-moz-animation-delay:-0.2s;-ms-animation-delay:-0.2s;animation-delay:-0.2s}.is-mobile .slide-loader .dot2,.is-theme-unified .slide-loader .dot2{-webkit-animation-delay:-0.1s;-moz-animation-delay:-0.1s;-ms-animation-delay:-0.1s;animation-delay:-0.1s}#-ms-keyframes slide-loader{0%,80%,100%{-ms-transform:scale(0.6)}40%{-ms-transform:scale(0)}}#-moz-keyframes slide-loader{0%,80%,100%{-moz-transform:scale(0.6)}40%{-moz-transform:scale(0)}}#-webkit-keyframes slide-loader{0%,80%,100%{-webkit-transform:scale(0.6)}40%{-webkit-transform:scale(0)}}#keyframes slide-loader{0%,80%,100%{transform:scale(0.6)}40%{transform:scale(0)}}.mobile-load-title-overlay{display:none}.is-mobile .mobile-load-title-overlay,.is-touchable .mobile-load-title-overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;pointer-events:none}.is-mobile .mobile-load-title-overlay .mobile-load-title,.is-touchable .mobile-load-title-overlay .mobile-load-title{position:relative;height:30%;width:80%;margin:0 auto;line-height:43px;text-align:center;color:#aeb7bd;word-break:break-word}#media only screen and (min-width: 320px) and (orientation: landscape){.is-mobile .mobile-load-title,.is-touchable .mobile-load-title{font-size:28.8px;-moz-transform:translateY(33%);-ms-transform:translateY(33%);-webkit-transform:translateY(33%);transform:translateY(33%)}}#media only screen and (min-width: 320px) and (orientation: portrait){.is-mobile .slide-loader,.is-touchable .slide-loader{top:55%}.is-mobile .mobile-load-title,.is-touchable .mobile-load-title{font-size:28.8px;-moz-transform:translateY(35%);-ms-transform:translateY(35%);-webkit-transform:translateY(35%);transform:translateY(35%)}}
</style>
Every and any attempts to make it work was a complete failure for me.
Any advice is extremely appreciated.

Answer 1

It's great being able to change the animation. Here’s how for the HTML5 version.
I've done it with Storyline 360, and this method is reported to work in Storyline 3 too.
Publish your course and navigate to the folder that you published to.
Copy your chosen animation into this folder, making note of the filename. Optionally, place the animation within a subfolder.
Open the story_html5.html file in a text editor.
Relatively close to the top you will find:
url("data:image/svg+xml;base64
Delete data:image and the many lines following. You'll stop right before this part:
")
Now type the relative path and filename between the quotes you have left. So, now it looks like
url("folder/image.gif")
If your loader image is not exactly 100x100, then you will edit the width and height of your new animated image. If you look at the lines above where you just edited, you'll find the spot. The code looks like
width:100px;height:100px;
If your loader image is a spinning type, then you’re done. If it’s not a spinning type, you need to remove the sections of code that have “spin” in them, or your animation will also spin. Make sure you remove a whole section in between the semicolons, plus one semicolon. Don’t leave extra semicolons and don’t remove too many.
Source: Melissa Milloway’s tutorial