octo
/
brutaldon
mirror of https://gitlab.com/brutaldon/brutaldon
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve the page loading indicator

This commit is contained in:
Jason F. McBrayer 2018-09-05 09:16:37 -04:00
parent c92c28b55a
commit 8963f5d1d0
3 changed files with 45 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
brutaldon/static/css/brutaldon-dark.css
View File

@ -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%;}
}

27
brutaldon/static/css/brutaldon.css
View File

@ -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%;}
}

2
brutaldon/templates/base.html
View File

@ -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 %}