Using stylus now

styles/loading.styl

@@ -0,0 +1,95 @@
+duration = 0.8s
+size = 24px
+
+#loading-animation
+	display block
+	position fixed
+	bottom 1.15rem
+	right calc(1.15rem + 17px)
+	pointer-events none
+
+.sk-cube-grid
+	width size
+	height size
+	transform rotateZ(0deg)
+	animation sk-rotate duration infinite linear
+
+	.sk-cube
+		width 33.3%
+		height 33.3%
+		background-color alpha(linkHoverColor, 70%)
+		box-shadow 0 0 size alpha(linkHoverColor, 80%)
+		float left
+		animation sk-cube-grid duration infinite linear
+		border-radius 100%
+
+	.sk-cube5
+		background-color linkHoverColor
+		box-shadow 0 0 size alpha(linkHoverColor, 90%)
+
+	.sk-cube1
+	.sk-cube3
+	.sk-cube7
+	.sk-cube9
+		visibility hidden
+
+@keyframes sk-cube-grid
+	0%, 100%
+		transform scale3D(0.4, 0.4, 0.4)
+	50%
+		transform scale3D(0.9, 0.9, 0.9)
+
+@keyframes sk-rotate
+	0%
+		transform rotateZ(0deg)
+	100%
+		transform rotateZ(360deg)
+
+// Anime list loading
+.sk-folding-cube
+	margin 20px auto
+	width 40px
+	height 40px
+	position relative
+	transform rotateZ(45deg)
+	.sk-cube
+		float left
+		width 50%
+		height 50%
+		position relative
+		transform scale(1.1)
+		&:before
+			content ''
+			position absolute
+			top 0
+			left 0
+			width 100%
+			height 100%
+			background-color mainColor
+			animation sk-foldCubeAngle 2.4s infinite linear both
+			transform-origin 100% 100%
+	.sk-cube2
+		transform scale(1.1) rotateZ(90deg)
+		&:before
+			animation-delay 0.3s
+	.sk-cube3
+		transform scale(1.1) rotateZ(180deg)
+		&:before
+			animation-delay 0.6s
+	.sk-cube4
+		transform scale(1.1) rotateZ(270deg)
+		&:before
+			animation-delay 0.9s
+
+@keyframes sk-foldCubeAngle
+	0%, 10%
+		transform perspective(140px) rotateX(-180deg)
+		opacity 0
+
+	25%, 75%
+		transform perspective(140px) rotateX(0deg)
+		opacity 1
+
+	90%, 100%
+		transform perspective(140px) rotateY(180deg)
+		opacity 0