Ajout barre de chargement

RobotechNancy · Jan 28, 2024 · 48bc76e · 48bc76e
1 parent 934102d
commit 48bc76e
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 0 deletions.
diff --git a/pages/Cartes.md b/pages/Cartes.md
@@ -6,6 +6,7 @@ Pour tout ce qui est prise de décision et reconnaissance d'images, des Raspberr
 
 ![GPIO Raspberry Pi](/static/images/boards/GPIO.webp){: style="display: inline-block;"}
 ![Tailles Raspberry Pi](/static/images/boards/RPI.webp){: style="display: inline-block;"}
+{: style="text-align: center;"}
 
 Pour le reste, des NUCLEO-L432KC sont utilisées :
 ![NUCLEO-L432KC](/static/images/boards/L432KC.webp)
diff --git a/scss/_layout.scss b/scss/_layout.scss
@@ -170,6 +170,25 @@ header {
 
 }
 
+#loader.active {
+	top: 0;
+	width: 100%;
+	height: 2px;
+    position: fixed;
+    background-color: var(--accent-color);
+    animation: loader .8s forwards;
+
+    @keyframes loader {
+        0% { width: 0; }
+        99% { width: 100%; }
+        100% { opacity: 0; }
+    }
+
+	@media (max-width: $mobile-break) {
+		top: $nav-header-height;
+	}
+}
+
 .main {
 	margin-top: $space + $nav-header-height;
 

diff --git a/static/script.js b/static/script.js
@@ -1,3 +1,7 @@
+function preFetch() {
+    loader.classList.add('active');
+}
+
 function updateWithJSON(json) {
     document.title = "Wiki Robotech Nancy - " + json["title"];
     document.querySelector('meta[name="description"]').content = json["description"];
@@ -30,4 +34,5 @@ function postFetch() {
 
     window.scrollTo(0, 0);
     document.body.classList.remove('nav-open');
+
 }
diff --git a/templates/base.html b/templates/base.html
@@ -30,6 +30,8 @@ <h1>
 			</nav>
 		</header>
 
+		<div id="loader" class="active"></div>
+
 		<section class="main">
 			<div class="page-header">
 				<h2>{% if uri %}{{ uri }}{% else %}Wiki Robotech Nancy{% endif %}</h2>