Replace #project-loading spinning icon with a .loader-bar

This commit is contained in:
Pablo Vazquez 2018-09-07 14:55:04 +02:00
parent be98a95fc0
commit 35225a189d
4 changed files with 50 additions and 21 deletions

View File

@ -399,3 +399,53 @@ nav.sidebar
top: -1px
left: -19px
z-index: 1
$loader-bar-width: 100px
$loader-bar-height: 2px
.loader-bar
background-color: $color-background
bottom: 0
content: ''
display: none
height: 0
overflow: hidden
position: absolute
visibility: hidden
width: 100%
&:before
animation: none
background-color: $primary
content: ''
display: block
height: $loader-bar-height
left: -$loader-bar-width
position: absolute
width: $loader-bar-width
&.active
display: block
visibility: visible
&:before
animation: loader-bar-slide 2.5s linear infinite
@keyframes loader-bar-slide
from
left: -$loader-bar-width
width: 0%
50%
width: 30%
70%
width: 70%
80%
left: 50%
95%
left: 120%
to
left: 100%

View File

@ -250,23 +250,6 @@ ul.project-edit-tools
/* // Extra asset tools in dropdown */
/* // Edit Asset buttons */
#project-loading
color: $color-text-light-primary
margin-left: auto
display: inline-block
background-color: transparent
opacity: 0
transition: opacity 150ms ease-in-out
+position-center-translate
i
position: relative
top: 2px
&.active
background-color: rgba($color-background-nav-dark, .7)
opacity: 1
ul.project_nav-edit-list
list-style: none

View File

@ -39,8 +39,6 @@ script.
data-placement="left",
class="{% if title == 'about' %}active {% endif %}{% if project.picture_square %}image{% endif %}")
a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
#project-loading
i.pi-spin
| {% if project.picture_square %}
img(src="{{ project.picture_square.thumbnail('b', api=api) }}")
| {% else %}

View File

@ -12,8 +12,6 @@
data-placement="left",
class="{% if title == 'about' %}active {% endif %}{% if project.picture_square %}image{% endif %}")
a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
#project-loading
i.pi-spin
| {% if project.picture_square %}
img(src="{{ project.picture_square.thumbnail('b', api=api) }}")
| {% else %}