Added loading animation

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.hide
-		.sk-cube.sk-cube2
+		.sk-cube
-		.sk-cube.sk-cube3
+		.sk-cube.hide
-		.sk-cube.sk-cube4
+		.sk-cube
-		.sk-cube.sk-cube5
+		.sk-cube.sk-cube-center
-		.sk-cube.sk-cube6
+		.sk-cube
-		.sk-cube.sk-cube7
+		.sk-cube.hide
-		.sk-cube.sk-cube8
+		.sk-cube
-		.sk-cube.sk-cube9
+		.sk-cube.hide

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

styles/anime-grid.scarlet

@@ -3,6 +3,7 @@
 
 .anime-grid-cell
 	grid-cell
+	scale-up
 	shadow-up
 
 .anime-grid-image

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

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)