loader

PolyPhyHub · Jul 7, 2022 · 7a91a2c · 7a91a2c
1 parent f699042
commit 7a91a2c
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 16 deletions.
diff --git a/public/index.html b/public/index.html
@@ -25,19 +25,84 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+
+    <script>
+      (function () {
+        function id(v) {
+          return document.getElementById(v);
+        }
+        function loadbar() {
+          var ovrl = id("overlay"),
+            prog = id("progress"),
+            stat = id("progstat"),
+            img = document.images,
+            c = 0;
+          tot = img.length;
+
+          function imgLoaded() {
+            c += 1;
+            var perc = (((100 / tot) * c) << 0) + "%";
+            prog.style.width = perc;
+            stat.innerHTML = perc;
+            if (c === tot) return doneLoading();
+          }
+          function doneLoading() {
+            ovrl.style.opacity = 0;
+            setTimeout(function () {
+              ovrl.style.display = "none";
+            }, 1200);
+          }
+          for (var i = 0; i < tot; i++) {
+            var tImg = new Image();
+            tImg.onload = imgLoaded;
+            tImg.onerror = imgLoaded;
+            tImg.src = img[i].src;
+          }
+        }
+        document.addEventListener("DOMContentLoaded", loadbar, false);
+      })();
+    </script>
+    <style>
+      .no-js #loader {
+        display: none;
+      }
+      .js #loader {
+        display: block;
+        position: absolute;
+        left: 100px;
+        top: 0;
+      }
+      .se-pre-con {
+        position: fixed;
+        left: 0px;
+        top: 0px;
+        width: 100%;
+        height: 100%;
+        z-index: 9999;
+        background: center no-repeat rgb(0, 0, 0);
+      }
+    </style>
+    <script
+      type="text/javascript"
+      src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"
+    ></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div class="se-pre-con">
+      <div id="overlay">
+        <lottie-player src="https://assets8.lottiefiles.com/packages/lf20_wukqhhrq.json"  background="transparent"  speed="1"  style="width: 300px; height: 100vh; margin: auto;"  loop  autoplay></lottie-player>
+      </div>
+    </div>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
+  <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
+  <script>
+    $(window).load(function () {
+      // Animate loader off screen
+      $(".se-pre-con").fadeOut("slow");
+    });
+  </script>
 </html>
diff --git a/src/Components/About.js b/src/Components/About.js
@@ -34,12 +34,7 @@ const About = () => {
         optimal transport network given a set of point data in 3D space. Such
         data can represent the distribution of galaxies or dark matter halos,
         typically on the scales of 100s of megaparsecs. MCPM uses a swarm of
-        millions of particle-like agents to explore the simulation domain. These
-        agents are attracted to each other, as well as the input data. After a
-        number of iterations, the simulation reaches a dynamic equilibrium: the
-        agents still move, but the totality of their trajectories is stable. The
-        output of the algorithm at this stage is a 3D spatio-temporal density of
-        the agents which we interpret as an estimate of the Cosmic web.
+        millions of particle-like agents to explore the simulation domain.
       </p>
       <br />
       <p>