From 3d3d3072c8191781cd2cf1ae1a13e3c54583ecf6 Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Fri, 29 May 2020 00:19:41 -0400
Subject: [PATCH] basic progress bar animation

---
 loading/index.html | 67 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 loading/index.html
diff --git a/loading/index.html b/loading/index.html
new file mode 100644
index 0000000..bab8106
--- /dev/null
+++ b/loading/index.html
@@ -0,0 +1,67 @@
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      @font-face {
+          font-family: 'Raleway';
+          src: url('../fonts/Raleway-Regular.otf');
+      }
+      body {
+          background-color: black;
+          color: red;
+          font-family: 'Raleway';
+          text-align: center;
+          width: 100%;
+          margin: 0px;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+      }
+
+      #progressbar {
+          width: 90%;
+          border: 1px solid red;
+          padding: 3px;
+          margin: auto;
+      }
+
+      #filled {
+          width: 0%;
+          height: 20px;
+          background-color: red;
+      }
+
+      #percentage {
+          font-size: 25px;
+          font-weight: bold;
+          width: 100%;
+      }
+
+      @media only screen and (min-width: 600px) {
+          #progressbar {
+              width: 540px;
+          }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="progressbar">
+      <div id="filled"></div>
+    </div>
+    <div id="percentage">
+      0%
+    </div>
+    <script type="text/javascript">
+      var progress = 0;
+      function makeProgress() {
+          if (progress >= 100) {
+              return;
+          }
+          progress += 0.1;
+          document.getElementById("filled").style.width = progress + "%";
+          document.getElementById("percentage").innerText = Math.floor(progress) + "%";
+      }
+      setInterval(makeProgress, 50);
+    </script>
+  </body>
+</html>
