From a23e1841aac2940ac8d2b2dbe7fbea074786858a Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Sat, 17 Jun 2017 02:33:22 +0200
Subject: [PATCH] Added loading animation

---
 layout/layout.pixy               | 18 +++++++-------
 pages/profile/anime-list.scarlet |  2 +-
 styles/anime-grid.scarlet        |  1 +
 styles/include/mixins.scarlet    |  2 +-
 styles/loading.scarlet           | 41 ++++++++++++++++++++++++++++++++
 5 files changed, 53 insertions(+), 11 deletions(-)
 create mode 100644 styles/loading.scarlet

diff --git a/layout/layout.pixy b/layout/layout.pixy
index 95bbcc5f..adda228a 100644
--- a/layout/layout.pixy
+++ b/layout/layout.pixy
@@ -16,12 +16,12 @@ component Layout(app *aero.Application, user *arn.User, content string)
 
 component LoadingAnimation
 	#loading-animation.sk-cube-grid.fade
-		.sk-cube.sk-cube1
-		.sk-cube.sk-cube2
-		.sk-cube.sk-cube3
-		.sk-cube.sk-cube4
-		.sk-cube.sk-cube5
-		.sk-cube.sk-cube6
-		.sk-cube.sk-cube7
-		.sk-cube.sk-cube8
-		.sk-cube.sk-cube9
\ No newline at end of file
+		.sk-cube.hide
+		.sk-cube
+		.sk-cube.hide
+		.sk-cube
+		.sk-cube.sk-cube-center
+		.sk-cube
+		.sk-cube.hide
+		.sk-cube
+		.sk-cube.hide
\ No newline at end of file
diff --git a/pages/profile/anime-list.scarlet b/pages/profile/anime-list.scarlet
index f7a8f6c0..28c58800 100644
--- a/pages/profile/anime-list.scarlet
+++ b/pages/profile/anime-list.scarlet
@@ -2,7 +2,7 @@
 	horizontal-wrap
 
 .anime-list-item
-	padding 0.25rem
+	margin 0.25rem
 	// padding calc(content-padding / 4) calc(content-padding / 2)
 	// margin 0.25rem 0
 	// position relative
diff --git a/styles/anime-grid.scarlet b/styles/anime-grid.scarlet
index 23c895a7..2fdb94e2 100644
--- a/styles/anime-grid.scarlet
+++ b/styles/anime-grid.scarlet
@@ -3,6 +3,7 @@
 
 .anime-grid-cell
 	grid-cell
+	scale-up
 	shadow-up
 
 .anime-grid-image
diff --git a/styles/include/mixins.scarlet b/styles/include/mixins.scarlet
index af400394..20546f94 100644
--- a/styles/include/mixins.scarlet
+++ b/styles/include/mixins.scarlet
@@ -54,7 +54,7 @@ mixin saturate-up
 mixin scale-up
 	transform scale(1)
 	:hover
-		transform scale(1.08)
+		transform scale(1.06)
 
 mixin shadow-up
 	box-shadow shadow-light
diff --git a/styles/loading.scarlet b/styles/loading.scarlet
new file mode 100644
index 00000000..0f8214d6
--- /dev/null
+++ b/styles/loading.scarlet
@@ -0,0 +1,41 @@
+duration = 0.8s
+size = 24px
+
+#loading-animation
+	position fixed
+	bottom 1.15rem
+	right calc(1.15rem + 17px)
+	pointer-events none
+
+.sk-cube-grid
+	horizontal-wrap
+	width size
+	height size
+	transform rotateZ(0deg)
+	animation sk-rotate duration infinite linear
+
+.sk-cube
+	width 33.3%
+	height 33.3%
+	background-color main-color
+	opacity 0.7
+	border-radius 100%
+	animation sk-pulse duration infinite linear
+
+.sk-cube-center
+	opacity 1.0
+
+.hide
+	visibility hidden
+
+animation sk-rotate
+	0%
+		transform rotateZ(0deg)
+	100%
+		transform rotateZ(360deg)
+
+animation sk-pulse
+	0%, 100%
+		transform scale3D(0.4, 0.4, 0.4)
+	50%
+		transform scale3D(0.9, 0.9, 0.9)
\ No newline at end of file