Added loading animation

This commit is contained in:
Eduard Urbach 2017-06-17 02:33:22 +02:00
parent 2ed88947ec
commit a23e1841aa
5 changed files with 53 additions and 11 deletions

View File

@ -16,12 +16,12 @@ component Layout(app *aero.Application, user *arn.User, content string)
component LoadingAnimation component LoadingAnimation
#loading-animation.sk-cube-grid.fade #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

View File

@ -2,7 +2,7 @@
horizontal-wrap horizontal-wrap
.anime-list-item .anime-list-item
padding 0.25rem margin 0.25rem
// padding calc(content-padding / 4) calc(content-padding / 2) // padding calc(content-padding / 4) calc(content-padding / 2)
// margin 0.25rem 0 // margin 0.25rem 0
// position relative // position relative

View File

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

View File

@ -54,7 +54,7 @@ mixin saturate-up
mixin scale-up mixin scale-up
transform scale(1) transform scale(1)
:hover :hover
transform scale(1.08) transform scale(1.06)
mixin shadow-up mixin shadow-up
box-shadow shadow-light box-shadow shadow-light

41
styles/loading.scarlet Normal file
View File

@ -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)