Added loading bar. base.js is now loaded at the end of the document to gather all DOM elements.
This commit is contained in:
parent
74f6ab0609
commit
49458f96fb
9 changed files with 103 additions and 31 deletions
|
|
@ -8,8 +8,8 @@
|
|||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
|
||||
|
||||
<script src="../lib/anime.min.js"></script>
|
||||
<script src="../js/base.js"></script>
|
||||
<link href="../css/avocat.css" rel="stylesheet">
|
||||
<link href="css/base.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -29,4 +29,5 @@
|
|||
<Footer></Footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
<script src="js/base.js"></script>
|
||||
25
css/base.css
25
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);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
|
||||
<script src="../lib/anime.min.js"></script>
|
||||
<script src="../js/base.js"></script>
|
||||
<link href="css/base.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -15,4 +15,5 @@
|
|||
<Footer></Footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
<script src="js/base.js"></script>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
|
||||
<script src="../lib/anime.min.js"></script>
|
||||
<script src="../js/base.js"></script>
|
||||
<link href="css/base.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -15,4 +15,5 @@
|
|||
<Footer></Footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
<script src="js/base.js"></script>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
|
||||
|
||||
<script src="lib/anime.min.js"></script>
|
||||
<script src="js/base.js"></script>
|
||||
<link href="css/base.css" rel="stylesheet">
|
||||
<link href="css/index.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
|
|
@ -83,5 +83,5 @@
|
|||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<script src="js/base.js"></script>
|
||||
<script src="js/index.js"></script>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
|
||||
<script src="../lib/anime.min.js"></script>
|
||||
<script src="../js/base.js"></script>
|
||||
<link href="css/base.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -15,4 +15,5 @@
|
|||
<Footer></Footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
<script src="js/base.js"></script>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
|
||||
<script src="../lib/anime.min.js"></script>
|
||||
<script src="../js/base.js"></script>
|
||||
<link href="css/base.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -15,4 +15,5 @@
|
|||
<Footer></Footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
<script src="js/base.js"></script>
|
||||
65
js/base.js
65
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
|
||||
|
|
|
|||
15
js/footer.js
15
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 = "";
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue