diff --git a/avocat/index.html b/avocat/index.html index e49eeab..4703c2a 100644 --- a/avocat/index.html +++ b/avocat/index.html @@ -8,8 +8,8 @@ - + @@ -29,4 +29,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/css/base.css b/css/base.css index ca8dd4b..460c004 100644 --- a/css/base.css +++ b/css/base.css @@ -84,6 +84,31 @@ p { z-index: 99; } +#loading-container { + width: auto; + height: 30%; + top: 35%; + position: relative; + display: flex; + flex-direction: column; +} + +.loading-content img{ + margin: 0.5rem; + height: auto; + width: 30%; + display: flex; + margin-left: auto; + margin-right: auto; +} + +.loading-content p{ + color: var(--color-dark); + font-size: xx-large; + text-align: center; + margin: 1rem; +} + @media screen and (min-width: 700px) { .block { background-color: var(--color-main-light); diff --git a/droits/affaire.html b/droits/affaire.html index 17a002f..eea4d7d 100644 --- a/droits/affaire.html +++ b/droits/affaire.html @@ -7,7 +7,7 @@ - + @@ -15,4 +15,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/droits/penal.html b/droits/penal.html index 196d5e7..2c1fff4 100644 --- a/droits/penal.html +++ b/droits/penal.html @@ -7,7 +7,7 @@ - + @@ -15,4 +15,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/index.html b/index.html index 7522c28..65b534b 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + @@ -83,5 +83,5 @@ - + \ No newline at end of file diff --git a/join/contact.html b/join/contact.html index 1956689..ddb0488 100644 --- a/join/contact.html +++ b/join/contact.html @@ -7,7 +7,7 @@ - + @@ -15,4 +15,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/join/coordonees.html b/join/coordonees.html index d2afe13..86b04c7 100644 --- a/join/coordonees.html +++ b/join/coordonees.html @@ -7,7 +7,7 @@ - + @@ -15,4 +15,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/js/base.js b/js/base.js index 479ef14..5518ca0 100644 --- a/js/base.js +++ b/js/base.js @@ -7,6 +7,8 @@ var urlStr = window.location.toString().slice(0, window.location.toString().last var dirStr = window.location.pathname.substring(1, window.location.pathname.lastIndexOf('/')); //the head tag var headTag = document.getElementsByTagName("head")[0]; +//the body tag +var bodyTag = document.getElementsByTagName("body")[0]; //Global variable set to true when finished loading external html/css/js files var finishedLoading = false; @@ -98,39 +100,64 @@ function concatPath(slashNum, basePath) { return slashString + basePath; } -function showPopUp(className) { - document.getElementsByClassName(className)[0].style.display = "block"; - document.getElementsByTagName("body")[0].style.height = "100%"; - document.getElementsByTagName("body")[0].style.overflow = "hidden"; -} - -function closePopUp(className) { - document.getElementsByClassName(className)[0].style.display = "none"; - document.getElementsByTagName("body")[0].style.height = ""; - document.getElementsByTagName("body")[0].style.overflow = ""; -} - function popUpPlacement(className) { var popup = document.getElementsByClassName(className)[0]; var body = document.getElementsByTagName("body")[0]; body.insertBefore(popup, body.firstChild) } +function loadingCreation() { + var elementLoadingBg = document.createElement("div"); + elementLoadingBg.id="loading-bg"; + + var elementLoadingContainer = document.createElement("div"); + elementLoadingContainer.id="loading-container"; + + //the text inside the container + var elementLoadingContentTxt = document.createElement("div"); + elementLoadingContentTxt.className="loading-content"; + var txt = document.createElement("p"); + txt.innerHTML="Loading..."; + elementLoadingContentTxt.appendChild(txt); + + //the image inside the container + var elementLoadingContentImg = document.createElement("div"); + elementLoadingContentImg.className="loading-content"; + var img = document.createElement("img"); + img.className = "loading-img"; + img.src = "assets/Logo.png"; + elementLoadingContentImg.appendChild(img); + + //we then append all + elementLoadingContainer.append(elementLoadingContentImg); + elementLoadingContainer.append(elementLoadingContentTxt); + elementLoadingBg.append(elementLoadingContainer); + return elementLoadingBg; +} + /****************************************/ /* 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); +//Adding the loading bar +var loadingElement = loadingCreation(); +bodyTag.insertBefore(loadingElement, bodyTag.firstChild); + +//We then create the animation +var loadingAnimation = anime({ + targets: '.loading-content .loading-img', + easing: 'easeOutQuint', + translateY: [ + { value: -30, duration: 1000, delay: 0 }, + { value: -30, duration: 500, delay: 0 }, + { value: 0, duration: 1000, delay: 0 } + ], + loop: true }); + //Loading the html,js and css of navbar and footer window.addEventListener('load', function () { //instant loading loadJS("//code.iconify.design/1/1.0.6/iconify.min.js", headTag); - loadCSS(urlStr + "css/base.css", headTag); loadCSS(urlStr + "css/navbar.css", headTag); loadCSS(urlStr + "css/footer.css", headTag); //async loading diff --git a/js/footer.js b/js/footer.js index e69de29..bfb2acb 100644 --- a/js/footer.js +++ b/js/footer.js @@ -0,0 +1,15 @@ +/****************************************/ +/* functions */ +/****************************************/ + +function showPopUp(className) { + document.getElementsByClassName(className)[0].style.display = "block"; + document.getElementsByTagName("body")[0].style.height = "100%"; + document.getElementsByTagName("body")[0].style.overflow = "hidden"; +} + +function closePopUp(className) { + document.getElementsByClassName(className)[0].style.display = "none"; + document.getElementsByTagName("body")[0].style.height = ""; + document.getElementsByTagName("body")[0].style.overflow = ""; +} \ No newline at end of file