theoludwig/FunctionProject
theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

Ajout: Preload la page avec animation chargement

Browse Source
This commit is contained in:
Divlo 2019-12-29 04:13:11 +01:00
parent 1f26995f2e
commit 8bd56568fe
4 changed files with 157 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
css/loader.css Normal file
View File

@ -0,0 +1,113 @@
#preloader {
background-color: #35363b;
}
.mainContent {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 400ms ease-out;
-moz-transition: opacity 400ms ease-out;
transition: opacity 400ms ease-out;
}
#overlay {
position: fixed;
z-index: 99;
top: -1000%;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
-webkit-transition: top 0s ease 0.35s, opacity 0.35s ease;
-moz-transition: top 0s ease 0.35s, opacity 0.35s ease;
transition: top 0s ease 0.35s, opacity 0.35s ease;
}
.loading #preloader {
display: block;
}
.loading .mainContent {
opacity: 0;
visibility: hidden;
}
#preloader {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
#preloader .preload-text {
display: none;
}
#preloader .preload-icon {
width: 70px;
height: 70px;
display: inline-block;
padding: 0px;
text-align: left;
position: absolute;
left: 50%;
top: 50%;
margin-left: -35px;
margin-top: -35px;
}
#preloader .preload-icon span {
position: absolute;
display: inline-block;
width: 70px;
height: 70px;
border-radius: 100%;
background: #000000;
-webkit-animation: preloader 1.6s linear infinite;
-moz-animation: preloader 1.6s linear infinite;
animation: preloader 1.6s linear infinite;
}
#preloader .preload-icon span:last-child {
-webkit-animation-delay: -0.8s;
-moz-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes preloader {
0% {
-webkit-transform: scale(0, 0);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1, 1);
opacity: 0;
}
}
@-moz-keyframes preloader {
0% {
-moz-transform: scale(0, 0);
opacity: 0.5;
}
100% {
-moz-transform: scale(1, 1);
opacity: 0;
}
}
@keyframes preloader {
0% {
transform: scale(0, 0);
opacity: 0.5;
}
100% {
transform: scale(1, 1);
opacity: 0;
}
}

8
incl/footer.php
View File

@ -9,6 +9,14 @@
</div> </div>
</div> </div>
</footer> </footer>
</div>
<!-- Preload -->
<div id="overlay"></div>
<div id="preloader">
<div class="preload-icon"><span></span><span></span></div>
<div class="preload-text">Loading ...</div>
</div>
<!-- Scripts JS --> <!-- Scripts JS -->
<script defer src="/scripts/libs/jquery-min.js"></script> <script defer src="/scripts/libs/jquery-min.js"></script>

60
incl/header.php
View File

@ -37,38 +37,40 @@
<link rel="stylesheet" href="/css/libs/fonts.css"> <link rel="stylesheet" href="/css/libs/fonts.css">
<link rel="stylesheet" href="/css/libs/fontawesome/css/all.css"> <link rel="stylesheet" href="/css/libs/fontawesome/css/all.css">
<link rel="stylesheet" href="/css/animationsScroll.css"> <link rel="stylesheet" href="/css/animationsScroll.css">
<link rel="stylesheet" href="/css/loader.css">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
</head> </head>
<body class="d-flex flex-column"> <body class="loading d-flex flex-column">
<header> <div class="mainContent">
<nav class="navbar navbar-expand-lg navbar-dark static-top"> <header>
<div class="container" id="header-container"> <nav class="navbar navbar-expand-lg navbar-dark static-top">
<!-- Brand --> <div class="container" id="header-container">
<a class="navbar-brand" href="/index.php"> <!-- Brand -->
<img id="logo-header" alt="FunctionProject"> <a class="navbar-brand" href="/index.php">
</a> <img id="logo-header" alt="FunctionProject">
</a>
<!-- Hamburger icon on Mobile --> <!-- Hamburger icon on Mobile -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<!-- Navigation --> <!-- Navigation -->
<div class="collapse navbar-collapse" id="navbarResponsive"> <div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<li class="nav-item <?php echo $indexActive?>"> <li class="nav-item <?php echo $indexActive?>">
<a class="nav-link" href="/index.php">Accueil</a> <a class="nav-link" href="/index.php">Accueil</a>
</li> </li>
<li class="nav-item <?php echo $functionlistActive?>"> <li class="nav-item <?php echo $functionlistActive?>">
<a class="nav-link" href="/views/function-list.php">Liste des fonctions</a> <a class="nav-link" href="/views/function-list.php">Liste des fonctions</a>
</li> </li>
<li class="nav-item <?php echo $feedbackActive?>"> <li class="nav-item <?php echo $feedbackActive?>">
<a class="nav-link" href="/views/feedback-form_view.php">Feedback Formulaire</a> <a class="nav-link" href="/views/feedback-form_view.php">Feedback Formulaire</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" target="_blank" href="https://github.com/Divlo/FunctionProject">Code Source</a> <a class="nav-link" target="_blank" href="https://github.com/Divlo/FunctionProject">Code Source</a>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div> </nav>
</nav> </header>
</header>

5
scripts/main.js
View File

@ -108,4 +108,9 @@ $(function () {
autoclose: false, autoclose: false,
todayHighlight: true todayHighlight: true
}); });
window.addEventListener('load', () => {
document.querySelector('body').classList.remove('loading');
document.getElementById('preloader').remove();
});
}); });