Ajout: Preload la page avec animation chargement

2019-12-29 04:13:11 +01:00
parent 1f26995f2e
commit 8bd56568fe
4 changed files with 157 additions and 29 deletions
--- a/css/loader.css
+++ b/css/loader.css
@ -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;
+    }
+}