Show waiting animation on upload finished

The server response can take some time. We need to show
the user that there is still progress.

app/assets/stylesheets/alchemy/_custom-properties.scss

@@ -73,7 +73,5 @@
   --file-upload_progress-value-color-failed: var(--color-red_medium);
   --file-upload_progress-value-color-invalid: var(--color-red_medium);
   --file-upload_progress-value-color-successful: var(--color-green_medium);
-  --file-upload_progress-value-color-upload-finished: var(
-    --color-grey-blue_light
-  );
+  --file-upload_progress-value-color-upload-finished: var(--color-blue_dark);
 }

app/assets/stylesheets/alchemy/upload.scss

@@ -71,20 +71,23 @@ alchemy-upload-progress {
     background-color: var(--file-upload_progress-bar-color);
     border: none;
     border-radius: var(--progress-border-radius, var(--border-radius));
-    height: var(--progress-height, 20px);
+    height: var(--progress-height, var(--spacing-2));
     margin: auto;
     width: 100%;
 
     &::-webkit-progress-bar {
+      background-image: var(--file-upload_progress-bar-background-image);
       background-color: var(--file-upload_progress-bar-color);
       border-radius: var(--progress-border-radius, var(--border-radius));
     }
 
     &::-moz-progress-bar {
+      background-image: var(--file-upload_progress-bar-background-image);
       background-color: var(--file-upload_progress-value-color);
     }
 
     &::-webkit-progress-value {
+      background-image: var(--file-upload_progress-bar-background-image);
       background-color: var(--file-upload_progress-value-color);
       background-size: 1rem 1rem;
       border-radius: var(--progress-border-radius, var(--border-radius));
@@ -103,7 +106,7 @@ alchemy-upload-progress {
     --padding: var(--spacing-2);
     --progress-border-radius: var(--border-radius_medium)
       var(--border-radius_medium) 0 0;
-    --progress-height: var(--spacing-3);
+    --progress-height: var(--spacing-1);
 
     display: grid;
     gap: var(--spacing-2);
@@ -200,4 +203,35 @@ alchemy-upload-progress {
   --file-upload_progress-value-color: var(
     --file-upload_progress-value-color-upload-finished
   );
+
+  --file-upload_progress-bar-background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.6) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.6) 50%,
+    rgba(255, 255, 255, 0.6) 75%,
+    transparent 75%,
+    transparent 100%
+  );
+
+  progress::-moz-progress-bar {
+    background-repeat: repeat;
+    background-size:
+      40px 40px,
+      100% 100%;
+    animation-name: progress-bar-stripes;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+  }
+}
+
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 40px 0;
+  }
 }