diff --git a/components/navigation/Loader.vue b/components/navigation/Loader.vue
index 252defdf1b334701f728ba8530f2b7aaa451d9ea..82d80f7085355e2f375568a72063926a26efc521 100644
--- a/components/navigation/Loader.vue
+++ b/components/navigation/Loader.vue
@@ -1,19 +1,41 @@
 <template>
-  <div class="loader mx-auto" role="status" v-if="isLoading">
-    <span class="sr-only">Chargement...</span>
-  </div>
+<div class="loader overflow-hidden text-center position-absolute" :class="state">
+  <img src="~@/assets/img/loader.gif">
+  <div class="text-center font-weight-bold my-3">Chargement...</div>
+</div>
+
 </template>
 
 <script>
 export default {
-    props: {isLoading: Boolean}
+    data() {
+      return {
+        state: ''
+      }
+    },
+    props: {isLoading: Boolean},
+    watch: {
+      isLoading: {
+        handler(n,o) {
+          this.state = "hidden"
+        }
+      }
+    }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .loader {
-  background-image: url('~@/assets/img/loader.gif');
-  height: 300px;
-  width: 400px;
+  z-index: 50;
+  left: 50%;
+  transform: translateX(-50%);
+  --color: #391855;
+  color: var(--color);
+}
+.result, .loader {
+  transition: opacity .3s linear;
+}
+.hidden {
+  opacity: 0;
 }
 </style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index cbc088c1ccb72eb570953458e6fb52e012c86eb4..95b9bdb0d0cb8a083d2a905c330df5b3266cb326 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -61,5 +61,6 @@ export default {
 }
 main {
   padding-top: 5rem;
+  position: relative;
 }
 </style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index f1a3177a2e6ac1e078786168ff0c1fc5dd28ee2b..a328af1410de8ab6ef8d9841efb2a9c75636d60e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,17 +1,20 @@
 <template>
 <main class="container">
   <h2 class="text-center mb-5 font-weight-light">Entrées et sorties de la toile de confiance des 2 derniers jours</h2>
-  <NavigationLoader :isLoading="$apollo.queries.newMembers.loading" class="d-block mx-auto" />
-  <div class="row text-center" v-if="!$apollo.queries.newMembers.loading && newMembers">
-    <div class="col-lg-6">
-      <h2 class="h4 text-success">Bienvenue à</h2>
-      <MemberList :members="newMembers['entrees']" :displayPubkey="false" :displayHead="false" />
-    </div>
-    <div class="col-lg-6">
-      <h2 class="h4 text-danger">Au revoir à</h2>
-      <MemberList :members="newMembers['sorties']" :displayPubkey="false" :displayHead="false" />
+  <NavigationLoader :isLoading="$apollo.queries.newMembers.loading" />
+  <div class="result" :class={hidden:$apollo.queries.newMembers.loading}>
+    <div class="row text-center" v-if="!$apollo.queries.newMembers.loading && newMembers">
+      <div class="col-lg-6">
+        <h2 class="h4 text-success">Bienvenue à</h2>
+        <MemberList :members="newMembers['entrees']" :displayPubkey="false" :displayHead="false" />
+      </div>
+      <div class="col-lg-6">
+        <h2 class="h4 text-danger">Au revoir à</h2>
+        <MemberList :members="newMembers['sorties']" :displayPubkey="false" :displayHead="false" />
+      </div>
     </div>
   </div>
+
 </main>
 </template>
 
diff --git a/pages/membres/_hash.vue b/pages/membres/_hash.vue
index e40420d18ede0d2aeb5acf14b4ef66e703c5741b..c0bfe3f9ddcb0317d51345eb0912859b6c911b2d 100644
--- a/pages/membres/_hash.vue
+++ b/pages/membres/_hash.vue
@@ -1,6 +1,6 @@
 <template>
   <main class="content container">
-    <NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" class="d-block mb-3" />
+    <NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" />
     <div v-if="!$apollo.queries.idFromHash.loading">
       <div class="row">
         <div class="col-md-10 col-lg-8 col-xl-6 mx-auto mt-3">
diff --git a/pages/membres/index.vue b/pages/membres/index.vue
index 937b2e25237f524a6032e97e025faebf373aee43..4632a2195436bf6bdfd243686162e356fad8eedf 100644
--- a/pages/membres/index.vue
+++ b/pages/membres/index.vue
@@ -8,7 +8,7 @@
       <small id="rechHelp" class="form-text text-muted">Saisissez le début d'un pseudo ou d'une clé publique</small>
     </div>
   </div>
-  <NavigationLoader :isLoading="$apollo.queries.idSearch.loading" class="d-block mx-auto" />
+  <NavigationLoader :isLoading="$apollo.queries.idSearch.loading" />
   <div class="row" v-if="idSearch && !$apollo.queries.idSearch.loading && param.length > 2">
     <div class="col-8 m-auto">
       <MemberList :members="idSearch.ids"/>
diff --git a/pages/previsions/_hash.vue b/pages/previsions/_hash.vue
index 717ec9d3dc38e5a4b4363c7e228d3d8e8f1f232d..7c0c250280bf08a197066a0f6594c89f0d058ac6 100644
--- a/pages/previsions/_hash.vue
+++ b/pages/previsions/_hash.vue
@@ -1,6 +1,6 @@
 <template>
   <main class="content container">
-    <NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" class="d-block mb-3" />
+    <NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" />
     <div v-if="!$apollo.queries.idFromHash.loading">
       <div class="row">
         <div class="col-md-10 col-lg-8 col-xl-6 mx-auto mt-3">
diff --git a/pages/previsions/index.vue b/pages/previsions/index.vue
index ca47a0e9c12e12052c77386b32b943890673072f..a7e776df6fbb850bda96fbccd6bfbf5e7533889e 100644
--- a/pages/previsions/index.vue
+++ b/pages/previsions/index.vue
@@ -2,7 +2,7 @@
 <main class="container">
   <h2 class="text-center mb-5 font-weight-light">En préparation</h2>
   <b-alert variant="danger" show>En développement</b-alert>
-  <NavigationLoader :isLoading="$apollo.queries.test.loading" class="d-block mb-3" />
+  <NavigationLoader :isLoading="$apollo.queries.test.loading" />
   <div v-if="test">
     {{ test }}
   </div>
diff --git a/pages/previsions/newcomers.vue b/pages/previsions/newcomers.vue
index 68c30a0f6538ee0cc176949ff425923466774dbb..49e32716bd19be64a90dda586c512b0d23e9735a 100644
--- a/pages/previsions/newcomers.vue
+++ b/pages/previsions/newcomers.vue
@@ -1,6 +1,6 @@
 <template>
 <main class="container">
-  <NavigationLoader :isLoading="$apollo.queries.wwResult.loading" class="d-block mx-auto" />
+  <NavigationLoader :isLoading="$apollo.queries.wwResult.loading" />
   <div v-if="!$apollo.queries.wwResult.loading">
     <h2 class="text-center mb-5 font-weight-light">Prévisions <small><span class="badge badge-secondary">{{ wwResult.dossiers_nb }} dossiers en attente</span></small></h2>
     <div class="alert alert-info" role="alert">