See #260 - adds progress spinner.

diff --git a/docs/css/home.css b/docs/css/home.css
index 37ca5cb..002132b 100644 (file)
--- a/docs/css/home.css
+++ b/docs/css/home.css
@@ -1,3 +1,12 @@
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 a, article, body, div, fieldset, form, h1, h2, h3, h4, h5, h6, input, label, li, nav, ol, p, section, span, textarea, ul {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -57,6 +66,22 @@ a, article, body, div, fieldset, form, h1, h2, h3, h4, h5, h6, input, label, li,
   background-color: hsl(0, 0%, 98%);
 }
 
+.dropped-files__file:not(.dropped-files__file--optimized) {
+  position: relative;
+}
+
+.dropped-files__file:not(.dropped-files__file--optimized):after {
+  animation: rotate 1.25s linear infinite;
+  background: url(../img/spinner.svg) center center / 1.25rem 1.25rem no-repeat;
+  content: " ";
+  display: block;
+  height: 100%;
+  position: absolute;
+  right: 0.25rem;
+  top: 0;
+  width: 1.5rem;
+}
+
 .dropped-files__file:not(.dropped-files__file--optimized) > .dropped-files__file__action {
   display: none;
 }

diff --git a/docs/img/spinner.svg b/docs/img/spinner.svg
new file mode 100644 (file)
index 0000000..9fa848f
--- /dev/null
+++ b/docs/img/spinner.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="shared" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g fill="#27AAE1">
+            <rect id="12" x="46" y="4" width="8" height="24"></rect>
+            <rect id="11" opacity="0.91" transform="translate(32.464102, 20.124356) rotate(330.000000) translate(-32.464102, -20.124356) " x="28.4641016" y="8.12435565" width="8" height="24"></rect>
+            <rect id="10" opacity="0.83" transform="translate(20.124356, 32.464102) rotate(300.000000) translate(-20.124356, -32.464102) " x="16.1243557" y="20.4641016" width="8" height="24"></rect>
+            <rect id="9" opacity="0.75" transform="translate(16.000000, 50.000000) rotate(270.000000) translate(-16.000000, -50.000000) " x="12" y="38" width="8" height="24"></rect>
+            <rect id="8" opacity="0.66" transform="translate(20.124356, 67.464102) rotate(240.000000) translate(-20.124356, -67.464102) " x="16.1243557" y="55.4641016" width="8" height="24"></rect>
+            <rect id="7" opacity="0.58" transform="translate(32.464102, 80.124356) rotate(210.000000) translate(-32.464102, -80.124356) " x="28.4641016" y="68.1243557" width="8" height="24"></rect>
+            <rect id="6" opacity="0.5" transform="translate(50.000000, 84.000000) rotate(180.000000) translate(-50.000000, -84.000000) " x="46" y="72" width="8" height="24"></rect>
+            <rect id="5" opacity="0.41" transform="translate(67.464102, 80.124356) rotate(150.000000) translate(-67.464102, -80.124356) " x="63.4641016" y="68.1243557" width="8" height="24"></rect>
+            <rect id="4" opacity="0.33" transform="translate(80.124356, 67.464102) rotate(120.000000) translate(-80.124356, -67.464102) " x="76.1243557" y="55.4641016" width="8" height="24"></rect>
+            <rect id="3" opacity="0.25" transform="translate(84.000000, 50.000000) rotate(90.000000) translate(-84.000000, -50.000000) " x="80" y="38" width="8" height="24"></rect>
+            <rect id="2" opacity="0.16" transform="translate(80.124356, 32.464102) rotate(60.000000) translate(-80.124356, -32.464102) " x="76.1243557" y="20.4641016" width="8" height="24"></rect>
+            <rect id="1" opacity="0.08" transform="translate(67.464102, 20.124356) rotate(30.000000) translate(-67.464102, -20.124356) " x="63.4641016" y="8.12435565" width="8" height="24"></rect>
+        </g>
+    </g>
+</svg>