Animate some pixels, lovingly.

Antoine Goutenoir
1 parent 3d4f9a08
Showing 2 changed files with 58 additions and 0 deletions Show diff stats
flaskr/static/css/common/main.css
flaskr/templates/estimation-queue-wait.html
@@ -64,3 +64,51 @@ footer.page-footer a {
 span.required-asterisk {
     color: #901524;
 }
+
+
+
+
+
+
+/** SPINNER ******************************************************************/
+
+.lds-ripple {
+    display: inline-block;
+    position: relative;
+    width: 160px;
+    height: 160px;
+}
+
+.lds-ripple div {
+    position: absolute;
+    border: 4px solid #4a59c1;
+    opacity: 1;
+    border-radius: 50%;
+    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+
+.lds-ripple div:nth-child(2) {
+    animation-delay: -0.25s;
+}
+
+.lds-ripple div:nth-child(3) {
+    animation-delay: -0.5s;
+}
+
+@keyframes lds-ripple {
+    0% {
+        top: 72px;
+        left: 72px;
+        width: 0;
+        height: 0;
+        opacity: 1;
+    }
+    100% {
+        top: 0px;
+        left: 0px;
+        width: 144px;
+        height: 89px;
+
+        opacity: 0;
+    }
+}
 \ No newline at end of file
@@ -15,11 +15,21 @@ Estimation {{ estimation.public_id }} is computing… Please wait.
  
  
 {% block extra_meta %}
+{# push notifs are good but this complies w/ nojs #}
 <meta http-equiv="refresh" content="4">
 {% endblock %}
  
  
 {% block body %}
+
+<div class="text-center">
+    <div class="lds-ripple">
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+</div>
+
 {#<a href="/compute" id="compute" class="nojs btn btn-danger btn-lg" target="_blank">WORK!</a>#}
 <script type="text/javascript">
 var compute_now = function() {