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

2018-09-07 14:55:04 +02:00
parent be98a95fc0
commit 35225a189d
4 changed files with 50 additions and 21 deletions
--- a/src/styles/_apps_base.sass
+++ b/src/styles/_apps_base.sass
@@ -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%