loader ajax

user/themes/figureslibres/scss/theme/_animation.scss

@@ -36,6 +36,38 @@ $animate: all 0.2s ease-in-out;
           width: 50%;
         }
       }
+      #icone_list{
+        transition: 1s 0.5s margin-left,0.8s 0.3s opacity;
+        .hamburger{
+          &.hamburger--slider{
+            .hamburger-inner{
+              transform: translate3d(0,5px,0) rotate(0deg);
+              transition: 0s 0.2s transform;
+              &:after{
+                transform: translate3d(0,-10px,0) rotate(0deg);
+                transition: 0.2s 0.2s transform;
+              }
+            }
+          }
+        }
+      }
+      &.open{
+        #icone_list{
+          transition: 0.5s margin-left, 0.5s opacity;
+          .hamburger{
+            &.hamburger--slider{
+              .hamburger-inner{
+                transform: translate3d(0,5px,0) rotate(45deg);
+                transition: 0.8s 0.2s transform;
+                &:after{
+                  transform: translate3d(0,-10px,0) rotate(90deg);
+                  transition: 1s 0.2s transform;
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
 }
@@ -44,8 +76,6 @@ $animate: all 0.2s ease-in-out;
   position: absolute;
   width: 0px;
   height: 0px;
-  background: $color_culturelle;
-  border-radius: 500px;
   transform: translate(-50%, -50%);
   z-index: 0;
   transition: height .2s, width .2s;
@@ -55,12 +85,17 @@ $animate: all 0.2s ease-in-out;
     transition: height .5s, width .5s;
   }
   &.publique{
-    background: $color_publique;
+      background:
+      url("/user/themes/figureslibres/images/forme2.svg") center no-repeat;
+      background-size: cover;
   }
   &.sociale{
     background: $color_sociale;
+    border-radius: 100px;
   }
   &.culturelle{
-    background: $color_culturelle;
+    background:
+    url("/user/themes/figureslibres/images/forme3.svg") center no-repeat;
+    background-size: cover;
   }
 }