diff --git a/application/objets/Environment.php b/application/objets/Environment.php
new file mode 100644
index 0000000..6454701
--- /dev/null
+++ b/application/objets/Environment.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace MVC\Object;
+
+class Environment
+{
+
+    public static  function getColorMenuFromEnv()
+    {
+        switch(ENV){
+            case 'TEST':
+                return 'red';
+                break;
+            case 'PREPROD':
+                return 'blue';
+                break;
+            case 'PROD':
+                return 'black';
+                break;
+            default:
+                return 'green';
+        }
+    }
+    public static  function getTextEnvironment()
+    {
+        switch(ENV){
+            case 'TEST':
+                return '<li style="background-color: '.self::getColorMenuFromEnv().'"><b>TESTING ENVIRONMENT</b><li>';
+                break;
+            case 'PREPROD':
+                return '<li style="background-color: '.self::getColorMenuFromEnv().'"><b>PREPROD ENVIRONMENT</b><li>';
+                break;
+            case 'PROD':
+                return '';
+                break;
+            default:
+                return '<li style="background-color: '.self::getColorMenuFromEnv().'"><b>DEVEL ENVIRONMENT</b><li>';
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/console/skel/page-vuejs.blade.php b/console/skel/page-vuejs.blade.php
index efa6874..4a14383 100644
--- a/console/skel/page-vuejs.blade.php
+++ b/console/skel/page-vuejs.blade.php
@@ -12,7 +12,10 @@
 	<div id="app">
             <div>
                 <input v-model="searchText" placeholder="Search...">
-            </div>    
+            </div>
+            <div v-if="is_loading">
+                <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+            </div>
             <div v-if="items" >
                 <a href="#" v-for="item in itemsSearched" :key="item.id">
                     <div>
@@ -45,13 +48,15 @@
             el: '#app',
             data: {
                 items: [],
-                searchText: ''
+                searchText: '',
+                is_loading: true,
             },
             mounted() {
                 axios
 					.get('https://ghibliapi.herokuapp.com/films')
 					.then(response => {
 						this.items = response.data;
+                        this.is_loading = false
 					})
                     .catch(error => console.log(error))
             },
diff --git a/public/assets/css/custom.css b/public/assets/css/custom.css
index 064645a..2c1e0b2 100644
--- a/public/assets/css/custom.css
+++ b/public/assets/css/custom.css
@@ -162,4 +162,61 @@ li.actual > a {
 }
 #access-denied > .container{
     padding-top: 10%;
+}
+/** LOADING */
+/** https://loading.io/css/ */
+.lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 64px;
+    height: 64px;
+}
+.lds-ellipsis div {
+    position: absolute;
+    top: 27px;
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+    background: #ddd;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+    left: 6px;
+    animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+    left: 6px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+    left: 26px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+    left: 45px;
+    animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+    0% {
+        transform: scale(0);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+@keyframes lds-ellipsis3 {
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(0);
+    }
+}
+@keyframes lds-ellipsis2 {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(19px, 0);
+    }
 }
\ No newline at end of file