Improved upload API

assets/js/page_upload.js

@@ -30,6 +30,14 @@ element.addEventListener("change", () => {
             image_title.placeholder = "Description";
             image_container.appendChild(image_title);
 
+            const image_progress = document.createElement("div");
+            image_progress.classList.add("progress");
+
+            const image_progress_indeterminate = document.createElement("div");
+            image_progress_indeterminate.classList.add("indeterminate");
+
+            image_progress.appendChild(image_progress_indeterminate);
+
             const image_link = document.createElement("a");
             image_link.classList.add("image");
             const image = document.createElement("img");

assets/sass/_page_upload.sass

@@ -147,6 +147,37 @@
           & + .image
             border-top-left-radius: 4px
             border-top-right-radius: 4px
+      .progress
+        position: absolute
+        height: 4px
+        display: block
+        background-color: rgba(255, 193, 7, 0.2)
+        overflow: hidden
+        transition: opacity 400ms
+        bottom: 0
+        left: 0
+        right: 0
+        .indeterminate
+          background-color: rgba(255, 193, 7, 0.8)
+          &::before
+            content: ''
+            position: absolute
+            background-color: inherit
+            top: 0
+            left: 0
+            bottom: 0
+            will-change: left, right
+            animation: indeterminate 4.2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite
+          &::after
+            content: ''
+            position: absolute
+            background-color: inherit
+            top: 0
+            left: 0
+            bottom: 0
+            will-change: left, right
+            animation: indeterminate-short 4.2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite
+            animation-delay: 2.25s
       .image
         background: #000
         display: flex
@@ -178,3 +209,25 @@
     display: none
   &:not(.submitted) .uploading.images
     display: none
+
+@keyframes indeterminate
+  0%
+    left: -35%
+    right: 100%
+  60%
+    left: 100%
+    right: -90%
+  100%
+    left: 100%
+    right: -90%
+
+@keyframes indeterminate-short
+  0%
+    left: -200%
+    right: 100%
+  60%
+    left: 107%
+    right: -8%
+  100%
+    left: 107%
+    right: -8%
\ No newline at end of file