ZenCache animations via CSS. See: wpsharks/comet-cache#83

wpsharks · Aug 7, 2015 · 846970f · 846970f
1 parent 44882b8
commit 846970f
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 8 deletions.
diff --git a/src/client-s/css/admin-bar.css b/src/client-s/css/admin-bar.css
@@ -111,7 +111,7 @@ Animation :: spin.
   animation-fill-mode: both;
 }
 /*
-Animation :: zoomInDown.
+Animation :: disk-bars.
 Markup: `<div class="zencache-animation-disk-bars"><div></div><div></div><div></div><div></div><div></div></div>`
 */
 
@@ -186,7 +186,7 @@ Markup: `<div class="zencache-animation-disk-bars"><div></div><div></div><div></
   }
 }
 /*
-Animation :: zoomInDown.
+Animation :: zoom-in-down.
 */
 
 @-webkit-keyframes zencache-animation-zoom-in-down {
@@ -230,10 +230,10 @@ Animation :: zoomInDown.
   animation-duration: .75s;
 }
 /*
-Animation :: bounceOutUp.
+Animation :: bounce-out-up.
 */
 
-@-webkit-keyframes zencache-animation_bounce-out-up {
+@-webkit-keyframes zencache-animation-bounce-out-up {
   20% {
     -webkit-transform: translate3d(0, -10px, 0);
     transform: translate3d(0, -10px, 0);
@@ -250,7 +250,7 @@ Animation :: bounceOutUp.
     transform: translate3d(0, -2000px, 0);
   }
 }
-@keyframes zencache-animation_bounce-out-up {
+@keyframes zencache-animation-bounce-out-up {
   20% {
     -webkit-transform: translate3d(0, -10px, 0);
     transform: translate3d(0, -10px, 0);
@@ -267,9 +267,9 @@ Animation :: bounceOutUp.
     transform: translate3d(0, -2000px, 0);
   }
 }
-.zencache-animation_bounce-out-up {
-  -webkit-animation-name: zencache-animation_bounce-out-up;
-  animation-name: zencache-animation_bounce-out-up;
+.zencache-animation-bounce-out-up {
+  -webkit-animation-name: zencache-animation-bounce-out-up;
+  animation-name: zencache-animation-bounce-out-up;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-duration: .75s;

diff --git a/src/client-s/css/menu-pages.css b/src/client-s/css/menu-pages.css
@@ -377,3 +377,78 @@ Save button styles.
   width: 100%;
   line-height: 1.3em;
 }
+/*
+Animation :: disk-bars.
+Markup: `<div class="animation-disk-bars"><div></div><div></div><div></div><div></div><div></div></div>`
+*/
+
+.plugin-menu-page .animation-disk-bars {
+  width: 100%;
+  box-sizing: border-box;
+}
+.plugin-menu-page .animation-disk-bars > div {
+  width: 19%;
+  height: 5em;
+  margin: 0 .5%;
+  display: inline-block;
+  box-sizing: border-box;
+  background-color: currentColor;
+  -webkit-animation: plugin-animation-disk-bars .9s infinite cubic-bezier(.11, .49, .38, .78);
+  -moz-animation: plugin-animation-disk-bars .9s infinite cubic-bezier(.11, .49, .38, .78);
+  -o-animation: plugin-animation-disk-bars .9s infinite cubic-bezier(.11, .49, .38, .78);
+  animation: plugin-animation-disk-bars .9s infinite cubic-bezier(.11, .49, .38, .78);
+}
+.plugin-menu-page .animation-disk-bars > div:nth-child(3) {
+  -webkit-animation-delay: -.9s;
+  -moz-animation-delay: -.9s;
+  -o-animation-delay: -.9s;
+  animation-delay: -.9s;
+}
+.plugin-menu-page .animation-disk-bars > div:nth-child(2),
+.plugin-menu-page .animation-disk-bars > div:nth-child(4) {
+  -webkit-animation-delay: -.65s;
+  -moz-animation-delay: -.65s;
+  -o-animation-delay: -.65s;
+  animation-delay: -.65s;
+}
+.plugin-menu-page .animation-disk-bars > div:nth-child(1),
+.plugin-menu-page .animation-disk-bars > div:nth-child(5) {
+  -webkit-animation-delay: -.4s;
+  -moz-animation-delay: -.4s;
+  -o-animation-delay: -.4s;
+  animation-delay: -.4s;
+}
+@-webkit-keyframes plugin-animation-disk-bars {
+  0% {
+    -webkit-transform: scaley(1);
+    transform: scaley(1);
+  }
+  80% {
+    -webkit-transform: scaley(.3);
+    transform: scaley(.3);
+  }
+  90% {
+    -webkit-transform: scaley(1);
+    transform: scaley(1);
+  }
+}
+@keyframes plugin-animation-disk-bars {
+  0% {
+    -webkit-transform: scaley(1);
+    -moz-transform: scaley(1);
+    -o-transform: scaley(1);
+    transform: scaley(1);
+  }
+  80% {
+    -webkit-transform: scaley(.3);
+    -moz-transform: scaley(.3);
+    -o-transform: scaley(.3);
+    transform: scaley(.3);
+  }
+  90% {
+    -webkit-transform: scaley(1);
+    -moz-transform: scaley(1);
+    -o-transform: scaley(1);
+    transform: scaley(1);
+  }
+}