42 lines
1.2 KiB
Stylus
42 lines
1.2 KiB
Stylus
@import '../constants'
|
|
|
|
[data-component-loading]
|
|
z-index : 2
|
|
> div
|
|
&::after
|
|
content : ""
|
|
position : absolute
|
|
transform scale(0.0)
|
|
SPEED = (3 * ANIMATION_DURATION)
|
|
&::after
|
|
border-radius : 50%
|
|
animation LOADING SPEED infinite
|
|
&:nth-child(1)::after
|
|
animation-delay (SPEED / 2.5)
|
|
&:nth-child(2)::after
|
|
animation-delay (SPEED / 5)
|
|
|
|
// -- Classes
|
|
&[data-component-loading="fullscreen"]
|
|
height : 100%
|
|
width : 100%
|
|
> div
|
|
width : SIZE = LOADING_HEIGHT
|
|
height : SIZE
|
|
&::after
|
|
content : ""
|
|
position : absolute
|
|
width : SIZE
|
|
height : SIZE
|
|
background-color : PRIMARY
|
|
transform scale(0.0)
|
|
&:nth-child(n+1)
|
|
margin-top : -(SIZE)
|
|
|
|
@keyframes LOADING
|
|
0%
|
|
transform scale(0.0)
|
|
100%
|
|
transform scale(1.0)
|
|
opacity: 0.1
|