From 8963f5d1d0913642db75533b5729dfc7e5b01e1b Mon Sep 17 00:00:00 2001 From: "Jason F. McBrayer" 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 %} {% endblock %} -
 
+
 
{% block content %}