Add loading bar to webpage

assets/index.html

@@ -16,7 +16,21 @@
         <button id="but">
           Upload
         </button>
+      <progress id="progress" value="0" max="100">Upload progress:</progress>
       </form>
+      <script>
+        htmx.on('#form', 'htmx:xhr:progress', function(evt) {
+          htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100)
+        });
+      </script>
+
+      <p class="centered">
+     <!--  <img src="https://bulgariu.xyz/avatar.gif" alt="" width=200px height=200px > -->
+      </p>
+
+      <!-- <footer> -->
+      <!--   Licensed under the GPL v3.0 -->
+      <!-- </footer> -->
     </div>
 
     </div>

assets/style.css

@@ -7,7 +7,16 @@
   border: 2px black solid;
 }
 
+.centered {
+  text-align: center;
+}
 
+img {
+  text-align: center;
+  border: 2px solid #ff6e00;
+  border-radius: 50%;
+  padding: 1%;
+}
 
 button {
   background-color: #eee;
@@ -38,9 +47,16 @@ form {
 
 a {
   color: #ff6e00;
+  text-decoration: none;
 }
 
-a:hover {}
+a:hover {
+  text-decoration: underline;
+}
+
+footer {
+  top: 100%;
+}
 
 #main {
   background-color: #eee;
@@ -48,6 +64,7 @@ a:hover {}
   height: 100%;
   padding-left: 5%;
   padding-right: 5%;
+  outline: solid 2px #ff6e00;
 }
 
 .container {