logo spin animation (#44)

localsend · Apr 28, 2024 · 3d1d7fc · 3d1d7fc
1 parent 3691761
commit 3d1d7fc
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/src/layouts/PageLayout.vue b/src/layouts/PageLayout.vue
@@ -1,10 +1,26 @@
+<style scoped>
+#logo {
+  animation: rotating 20s linear infinite;
+}
+
+@keyframes rotating {
+  from {
+    rotate: 0deg;
+  }
+  to {
+    rotate: 360deg;
+  }
+}
+</style>
+
 <template>
   <div class="fill-viewport pt-md-12">
     <v-row>
 
       <!-- Logo -->
       <v-col cols="12">
         <v-img
+          id="logo"
           height="200"
           src="@/assets/logo-512.png"
         />

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,3 +1,18 @@
+<style scoped>
+#logo {
+  animation: rotating 20s linear infinite;
+}
+
+@keyframes rotating {
+  from {
+    rotate: 0deg;
+  }
+  to {
+    rotate: 360deg;
+  }
+}
+</style>
+
 <template>
   <div class="fill-viewport d-flex align-center justify-center pa-4 pa-md-12">
     <v-row style="max-width: 1800px">
@@ -7,6 +22,7 @@
         <v-row>
           <v-col cols="12" md="4" class="d-flex justify-center justify-md-end">
             <img
+              id="logo"
               :height="logoHeight"
               alt="LocalSend Logo"
               src="@/assets/logo-512.png"