Add loading animation option to KLogo.

learningequality · Mar 8, 2024 · b96fd1c · b96fd1c
1 parent 8814ccc
commit b96fd1c
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 1 deletion.
diff --git a/docs/pages/klogo.vue b/docs/pages/klogo.vue
@@ -41,6 +41,27 @@
           :maxWidth="150"
         />
       </DocsShowCode>
+
+      <p>Shows Kolibri logo with loading animation.</p>
+
+      <DocsShow>
+        <KLogo
+          altText="Kolibri Logo with loading animation"
+          :animate="true"
+          :height="150"
+          width="100%"
+          :maxWidth="150"
+        />
+      </DocsShow>
+      <DocsShowCode language="html">
+        <KLogo
+          altText="Kolibri Logo with loading animation"
+          :animate="true"
+          :height="150"
+          width="100%"
+          :maxWidth="150"
+        />
+      </DocsShowCode>
     </DocsPageSection>
 
     <DocsPageSection title="Usage" anchor="#usage">

diff --git a/lib/KLogo/index.vue b/lib/KLogo/index.vue
@@ -1,7 +1,7 @@
 <template>
 
   <svg
-    :class="{ 'no-background': !showBackground }"
+    :class="{ 'no-background': !showBackground, animate }"
     xmlns="http://www.w3.org/2000/svg"
     role="img"
     :width="validateAndFormatUnits(width)"
@@ -171,6 +171,13 @@
         type: Boolean,
         default: false,
       },
+      /**
+       * Whether to show the loading animation for the logo
+       */
+      animate: {
+        type: Boolean,
+        default: false,
+      },
     },
     methods: {
       validateAndFormatUnits,
@@ -179,10 +186,77 @@
 
 </script>
 
+
 <style>
 
   .no-background .background {
     display: none;
   }
 
+  .animate .wing-inner {
+    animation: flapInner 2s 1.2s both infinite;
+  }
+
+  .animate .wing-middle {
+    animation: flapMiddle 2s 1.2s both infinite;
+  }
+
+  .animate .wing-outer {
+    animation: flapOuter 2s 1.2s both infinite;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes flapInner {
+    0% {
+      opacity: 0;
+    }
+    10% {
+      opacity: 1;
+    }
+    30% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes flapMiddle {
+    0% {
+      opacity: 0;
+    }
+    20% {
+      opacity: 0;
+    }
+    40% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes flapOuter {
+    0% {
+      opacity: 0;
+    }
+    40% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
 </style>