From 8963f5d1d0913642db75533b5729dfc7e5b01e1b Mon Sep 17 00:00:00 2001
From: "Jason F. McBrayer" <McBrayJF@dhec.sc.gov>
Date: Wed, 5 Sep 2018 09:16:37 -0400
Subject: [PATCH] Improve the page loading indicator

---
 brutaldon/static/css/brutaldon-dark.css | 27 ++++++++++++++++++++-----
 brutaldon/static/css/brutaldon.css      | 27 ++++++++++++++++++++-----
 brutaldon/templates/base.html           |  2 +-
 3 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/brutaldon/static/css/brutaldon-dark.css b/brutaldon/static/css/brutaldon-dark.css
index aeee5fd..fc26170 100644
--- a/brutaldon/static/css/brutaldon-dark.css
+++ b/brutaldon/static/css/brutaldon-dark.css
@@ -136,17 +136,34 @@ emoji-link
 #page-load-indicator
 {
     width: 100%;
-    height: 2px;
-    background-color: #4CC;
     opacity: 0.8;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 666;
     transition: all 500ms;
+    height: 4px;
+    overflow: hidden;
+    background-color: #ddd;
+    display: none;
 }
 
-#page-load-indicator.ic-use-transition
-{
-    width:0;
+#page-load-indicator:before{
+    display: block;
+    position: absolute;
+    content: "";
+    left: -200px;
+    width: 200px;
+    height: 4px;
+    background-color: #2980b9;
+    animation: page-loading 1.5s linear infinite;
+}
+
+@keyframes page-loading {
+    from {left: -200px; width: 30%;}
+    50% {width: 30%;}
+    70% {width: 70%;}
+    80% { left: 50%;}
+    95% {left: 120%;}
+    to {left: 100%;}
 }
diff --git a/brutaldon/static/css/brutaldon.css b/brutaldon/static/css/brutaldon.css
index 9f96663..f270b79 100644
--- a/brutaldon/static/css/brutaldon.css
+++ b/brutaldon/static/css/brutaldon.css
@@ -107,17 +107,34 @@ emoji-link
 #page-load-indicator
 {
     width: 100%;
-    height: 2px;
-    background-color: #4CC;
     opacity: 0.8;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 666;
     transition: all 500ms;
+    height: 4px;
+    overflow: hidden;
+    background-color: #ddd;
+    display: none;
 }
 
-#page-load-indicator.ic-use-transition
-{
-    width:0;
+#page-load-indicator:before{
+    display: block;
+    position: absolute;
+    content: "";
+    left: -200px;
+    width: 200px;
+    height: 4px;
+    background-color: #2980b9;
+    animation: page-loading 1.5s linear infinite;
+}
+
+@keyframes page-loading {
+    from {left: -200px; width: 30%;}
+    50% {width: 30%;}
+    70% {width: 70%;}
+    80% { left: 50%;}
+    95% {left: 120%;}
+    to {left: 100%;}
 }
diff --git a/brutaldon/templates/base.html b/brutaldon/templates/base.html
index 7f26b2d..ddcad85 100644
--- a/brutaldon/templates/base.html
+++ b/brutaldon/templates/base.html
@@ -137,7 +137,7 @@
                 {% endif %}
             </nav>
         {% endblock %}
-        <div id="page-load-indicator" class="ic-use-transition">&nbsp</div>
+        <div id="page-load-indicator">&nbsp</div>
         <section id="main" class="section" ic-history-elt="true">
             <div class="container">
                 {% block content %}