Replace #project-loading spinning icon with a .loader-bar
This commit is contained in:
parent
be98a95fc0
commit
35225a189d
@ -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%
|
||||
|
@ -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
|
||||
|
@ -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 %}
|
||||
|
@ -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 %}
|
||||
|
Loading…
x
Reference in New Issue
Block a user