basic progress bar animation

2020-05-29 00:19:41 -04:00 · 2020-05-29 00:19:41 -04:00 · 3d3d3072c8
parent 8b593d5fec
commit 3d3d3072c8
1 changed files with 67 additions and 0 deletions
--- a/loading/index.html
+++ 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>