124 lines
2.1 KiB
SCSS
124 lines
2.1 KiB
SCSS
$duration: 2;
|
|
.loading-plant-div-container {
|
|
display: flex;
|
|
position: fixed;
|
|
z-index: 1;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
padding-top: 10%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.loading-plant-svg-container {
|
|
transform: scale(0.35) translate(180px, 465px);
|
|
}
|
|
|
|
.loading-plant {
|
|
transform: scale(1);
|
|
transform-origin: bottom;
|
|
transform-box: fill-box;
|
|
animation: loading-plant-pop $duration*0.3s cubic-bezier(0, 0, 0, 1.3);
|
|
}
|
|
|
|
@keyframes loading-plant-pop {
|
|
0% {
|
|
transform: scale(0);
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.loading-plant-leaf {
|
|
transform-origin: center;
|
|
transform-box: fill-box;
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
animation: loading-plant-leaf-pop $duration*0.5s cubic-bezier(0, 0, 0, 1) 1;
|
|
}
|
|
|
|
@keyframes loading-plant-leaf-pop {
|
|
0% {
|
|
transform: scale(0.4);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.loading-plant-accent {
|
|
transform-origin: center;
|
|
transform-box: fill-box;
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
animation: loading-plant-accent-pop $duration*0.5s cubic-bezier(0, 0, 0, 1.4) 1;
|
|
}
|
|
|
|
@keyframes loading-plant-accent-pop {
|
|
0% {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.loading-plant-circle {
|
|
transform-origin: center;
|
|
transform-box: fill-box;
|
|
animation: loading-plant-circle-pop $duration*0.3s cubic-bezier(0, 0, 0, 1.4) 1, loading-plant-circle $duration*3s linear infinite $duration*0.3s;
|
|
}
|
|
|
|
@keyframes loading-plant-circle-pop {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.6);
|
|
stroke-dashoffset: -150;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes loading-plant-circle {
|
|
0% {
|
|
transform: scale(1.1);
|
|
stroke-dashoffset: 0;
|
|
}
|
|
50% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(1.1);
|
|
stroke-dashoffset: -800;
|
|
}
|
|
}
|
|
|
|
.loading-plant-text {
|
|
opacity: 1;
|
|
}
|
|
|
|
@keyframes loading-plant-text-fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
20% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|