web/notify.moe
Code Issues Pull Requests Activity

Added loading animation

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
layout/layout.pixy
View File

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

2
pages/profile/anime-list.scarlet
View File

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

1
styles/anime-grid.scarlet
View File

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

2
styles/include/mixins.scarlet
View File

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

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)