From ce01f0ac19fdad4fcf1b0a0c0e7a4fbf0811a837 Mon Sep 17 00:00:00 2001
From: "Dominik V. Salonen" <hi@quad.moe>
Date: Sun, 27 Dec 2015 00:38:52 +0100
Subject: [PATCH] Upload animation

---
 static/style.css      | 10 ++++++++++
 templates/upload.html |  4 +++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/static/style.css b/static/style.css
index ca10d15..68eac6b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -111,6 +111,16 @@ body {
   background-color: #33BB33;
 }
 
+@keyframes pulse {
+  0% {background-color: #117711;}
+  50% {background-color: #44CC44;}
+  100% {background-color: #117711;}
+}
+
+.uploading {
+  animation: pulse 3s infinite;
+}
+
 .uploadButton p {
   padding: 20px;
   font-weight: 300;
diff --git a/templates/upload.html b/templates/upload.html
index d5b719e..0644f52 100644
--- a/templates/upload.html
+++ b/templates/upload.html
@@ -4,7 +4,7 @@
     QuadFile
   </h1>
   <form action="" id="form" name="fileForm" method="post" enctype="multipart/form-data" class="uploadForm">
-    <div class="uploadButton">
+    <div id="uploadButton" class="uploadButton">
       <p id="uploadText">
         Click to select a file
       </p>
@@ -29,6 +29,8 @@
   <script>
   document.getElementById("file").onchange = function() {
     document.getElementById("uploadText").innerHTML = "Uploading...";
+    var button = document.getElementById("uploadButton");
+    button.className = button.className + " uploading";
     document.getElementById("form").submit();
   };
   </script>