init crater

This commit is contained in:
Mohit Panjwani
2019-11-11 12:16:00 +05:30
commit bdf2ba51d6
668 changed files with 158503 additions and 0 deletions

View File

@ -0,0 +1,58 @@
@import './animation/variables';
@import './animation/mixins';
@import './animation/functions';
$size: 50px;
@keyframes ball-scale-ripple-multiple {
0% {
transform: scale(0.1);
opacity: 1;
}
70% {
transform: scale(1);
opacity: 0.7;
}
100% {
opacity: 0.0;
}
}
@mixin ball-scale-ripple-multiple ($n:3, $start:0) {
@for $i from $start through $n {
> div:nth-child(#{$i}) {
animation-delay: delay(0.2s, $n, $i - 1);
}
}
}
.loader {
width: 100%;
position: relative;
min-height: 500px;
}
.ball-scale-ripple-multiple {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
transform: translateY(-25px);
top: 60%;
left: 40%;
@include ball-scale-ripple-multiple();
transform: translateY(-$size / 2);
> div {
@include global-animation();
position: absolute;
top: -2px;
left: -26px;
width: $size;
height: $size;
border-radius: 100%;
border: 2px solid $primary-color;
animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);
}
}