95 lines
1.7 KiB
Stylus
95 lines
1.7 KiB
Stylus
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 |