How to create a custom preloader for storyline 3?

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.