How to change the default loader of SPA.js
In this tutorial, we will see how to override and change the default loader used by spa.js in Awesome Enterprise
Step 1: Include spa.v3.min.js
We will need to change include the code of spa.v3.min.js file in our “Awesome JS” App. To do that, create a module say ‘spa-v3-js‘ and copy the code from the URL https://cdn.getawesomestudio.com/lib/spa/spa.v3.min.js and save it.
Step 2: Update all-js
In the ‘all-js‘ module comment or remove the following code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
jQuery( document ).ready(function( $ ) { $.ajax({ url: '[env.get settings.cdn /]spa/spa.v3.min.js', dataType: "script", cache: true, success: function() { spa.app.start({ homeurl:'[aw2.get url.home /]', cdn:'[env.get settings.cdn /]', path:'[aw2.get app.path /]/' }); } }); });* |
and, replace it with the code given below
|
1 2 3 4 5 |
[this_collection.include_raw spa-v3-js /] jQuery( document ).ready(function( $ ) { spa.app.start(aw2); }); |
and save the module.
These are all the preparatory steps needed before we could override the loader design.
Step 3: Replace the loader HTML
Next, to actually replace the loader all we need to do is change the value of spa.loader.html either in the spa-v3-js module itself or in the all-js module as shown below.
|
1 2 3 4 5 6 7 |
[this_collection.include_raw spa-v3-js /] spa.loader.html='<div id=\"spinner\" style=\'display:none\'><div class="sk-cube-grid"><div class="sk-cube sk-cube1"><img src="/wp-content/uploads/2021/07/Loader_1-01-copy.gif" class="img-responsive mar-t-2 is-block"></div></div></div><style>#spinner{margin:100px auto;width:60px;height:40px;text-align:center;font-size:10px;position:fixed;top:50%;left:50%;margin-top:-30px;margin-left:-25px} .sk-cube-grid { width: 80px; height: 80px; margin: 100px auto;}.sk-cube-grid .sk-cube { width: 50%; height: 50%; float: left; -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }.sk-cube-grid .sk-cube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }.sk-cube-grid .sk-cube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }.sk-cube-grid .sk-cube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }.sk-cube-grid .sk-cube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }.sk-cube-grid .sk-cube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }.sk-cube-grid .sk-cube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }.sk-cube-grid .sk-cube7 { -webkit-animation-delay: 0s; animation-delay: 0s; }.sk-cube-grid .sk-cube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }.sk-cube-grid .sk-cube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }@-webkit-keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); }}@keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } }</style>'; jQuery( document ).ready(function( $ ) { spa.app.start(aw2); }); |
the position of spa.loader.html is important, it has to be in a single line. You can use any online HTML minifier like https://minifycode.com/html-minifier/ to minify loader HTML and CSS in a single line.
Save the ‘all-js‘ module, purge the cache and you will have the updated loader.
Bonus example
Here is another example of replacing default the spa loader with another loader.
|
1 2 3 4 5 6 7 |
[this_collection.include_raw spa-v3-js /] spa.loader.html='<div id="spinner" style="display:none"><div class="preloader"> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ripple" style="background:0 0"><circle cx="50" cy="50" r="4.719" fill="none" stroke="#1d3f72" stroke-width="2"><animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="3" keySplines="0 0.2 0.8 1" begin="-1.5s" repeatCount="indefinite"/><animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="3" keySplines="0.2 0 0.8 1" begin="-1.5s" repeatCount="indefinite"/></circle><circle cx="50" cy="50" r="27.591" fill="none" stroke="#5699d2" stroke-width="2"><animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="3" keySplines="0 0.2 0.8 1" begin="0s" repeatCount="indefinite"/><animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="3" keySplines="0.2 0 0.8 1" begin="0s" repeatCount="indefinite"/></circle></svg></div></div><style>.preloader{display:flex;justify-content:center;align-items:center;height:100vh;width:100%;background:rgb(23, 22, 22);position:fixed;top:0;left:0;z-index:9999;transition:opacity 0.3s linear}</style>'; jQuery( document ).ready(function( $ ) { spa.app.start(aw2); }); |