Testing loading and fixed animation start

css/base.css

@@ -76,6 +76,14 @@ p {
     display: none;
 }
 
+#loading-bg {
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    background-color: #E79A58;
+    z-index: 99;
+}
+
 @media screen and (min-width: 700px) {
     .block {
         background-color: var(--color-main-light);

js/base.js

@@ -5,6 +5,8 @@
 var urlStr = window.location.toString().slice(0, window.location.toString().lastIndexOf(window.location.pathname) + 1);
 //Getting the dir name by gathering the pathname and substract it with the last '/'.
 var dirStr = window.location.pathname.substring(1, window.location.pathname.lastIndexOf('/'));
+//the head tag
+var headTag = document.getElementsByTagName("head")[0];
 //Global variable set to true when finished loading external html/css/js files
 var finishedLoading = false;
 
@@ -117,10 +119,14 @@ function popUpPlacement(className) {
 /****************************************/
 /*                 main                 */
 /****************************************/
-
+window.addEventListener('load', function () {
+    var body = document.getElementsByTagName("body")[0];
+    //loading elements
+    var loadingBackground = document.createElement("div");
+    loadingBackground.id = "loading-bg";
+    body.insertBefore(loadingBackground, body.firstChild);
+});
 //Loading the html,js and css of navbar and footer
-//During the loading process we need a loading status bar
-var headTag = document.getElementsByTagName("head")[0];
 window.addEventListener('load', function () {
     //instant loading
     loadJS("//code.iconify.design/1/1.0.6/iconify.min.js", headTag);
@@ -132,6 +138,7 @@ window.addEventListener('load', function () {
         load(urlStr + "components/footer.html", document.getElementsByTagName("Footer")[0], urlStr + "js/footer.js", headTag).then(() => {
             finishedLoading = true;
             popUpPlacement("black-bg");
+            document.getElementById("loading-bg").style.display = "none";
         });
     });
 })

js/index.js

@@ -27,7 +27,7 @@ var saoulAnimation = anime({
     ],
     rotate: [
         { value: 0, duration: 100, delay: 0 },
-        { value: -60, duration: 1000, delay: 100 }
+        { value: -780, duration: 1000, delay: 100 }
     ],
     begin: function () {
         document.getElementsByClassName("photosaoul")[0].style.display = "flex";
@@ -37,13 +37,15 @@ var saoulAnimation = anime({
 var whiteBandAnimation = anime({
     targets: '.whiteband',
     easing: 'easeInExpo',
+    autoplay: false,
     width: "100%",
-    duration: 2200,
+    duration: 1200,
 })
 
 var textAnimation = anime({
     targets: '.anim-text',
     easing: 'easeInOutExpo',
+    autoplay: false,
     opacity: [
         { value: 0, duration: 2000, delay: 0 },
         { value: 100, duration: 1000, delay: 100 }
@@ -92,14 +94,13 @@ window.addEventListener("scroll", function (e) {
 /*               functions              */
 /****************************************/
 
-
 async function playIndexAnimation() {
     while (!finishedLoading) {
         await new Promise(resolve => setTimeout(resolve, 200));
     }
-    setTimeout(() => {
     whiteBandAnimation.play();
     textAnimation.play();
+    setTimeout(() => {
         saoulAnimation.restart();
-    }, 500);
+    }, 1200);
 }