feat: add logo-pulse animation in web

sipasi · Aug 9, 2024 · ff7b624 · ff7b624
1 parent 4fe7600
commit ff7b624
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 0 deletions.
diff --git a/web/css/app.css b/web/css/app.css
@@ -0,0 +1,7 @@
+ html,
+ body {
+     margin: 0;
+     padding: 0;
+     height: 100%;
+     background-color: #1e1e1e;
+ }
diff --git a/web/css/loading.css b/web/css/loading.css
@@ -0,0 +1,19 @@
+@keyframes logo-pulse {
+    0% {
+        transform: scale(.8);
+    }
+
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+.loading-animation-container .logo {
+    position: absolute;
+    margin: auto auto;
+    inset: 0;
+    width: 240px;
+    height: 240px;
+    animation: logo-pulse 1.6s alternate infinite;
+}
diff --git a/web/index.html b/web/index.html
@@ -19,9 +19,17 @@
 
   <title>Open Work</title>
   <link rel="manifest" href="manifest.json">
+
+  <link rel="stylesheet" href="css/app.css" />
+  <link rel="stylesheet" href="css/loading.css" />
 </head>
 
 <body>
+  <!-- Page loading animation -->
+  <div class="loading-animation-container">
+    <img class="logo" src="icons/icon-512.png" />
+  </div>
+
   <script src="flutter_bootstrap.js" async></script>
 </body>