72 lines
1.0 KiB
SCSS
72 lines
1.0 KiB
SCSS
|
@use '../utils' as *;
|
||
|
|
|
||
|
|
/*----------------------------------------*/
|
||
|
|
/* PRELOADER CSS START
|
||
|
|
/*----------------------------------------*/
|
||
|
|
|
||
|
|
.tp-preloader {
|
||
|
|
background-color: var(--tp-common-white);
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
z-index: 9999;
|
||
|
|
left: 0;
|
||
|
|
opacity: 1;
|
||
|
|
visibility: visible;
|
||
|
|
@include transition(.3s);
|
||
|
|
|
||
|
|
&__center {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
& img,
|
||
|
|
svg {
|
||
|
|
display: block;
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
animation: tp-bounce 3s infinite;
|
||
|
|
& .path-yellow {
|
||
|
|
color: #EDB83E;
|
||
|
|
width: 0;
|
||
|
|
animation: colorchange 1.5s infinite;
|
||
|
|
@include transition(.5s);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes colorchange {
|
||
|
|
10% {
|
||
|
|
color:green;
|
||
|
|
}
|
||
|
|
10% {
|
||
|
|
color:pink;
|
||
|
|
}
|
||
|
|
20% {
|
||
|
|
color:deeppink;
|
||
|
|
}
|
||
|
|
30% {
|
||
|
|
color:darkorange;
|
||
|
|
}
|
||
|
|
40% {
|
||
|
|
color:aquamarine;
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
color:darkcyan;
|
||
|
|
}
|
||
|
|
70% {
|
||
|
|
color:orange;
|
||
|
|
}
|
||
|
|
80% {
|
||
|
|
color:cornflowerblue;
|
||
|
|
}
|
||
|
|
90% {
|
||
|
|
color:grey;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
color:white;
|
||
|
|
}
|
||
|
|
}
|