/home/awneajlw/www/wp-content/themes/codz/assets/scss/_preloader.scss
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
.preloader{
position:fixed;
top:0;
left:0;
z-index:99999;
display:flex;
align-items:center;
width:100%;
height:100%;
transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
&.loaded{
opacity:0;
visibility:hidden;
transform:scale(1.5);
-webkit-transform:scale(1.5);
}
}
/*--------------------------------------------------------------
# lds-circle
--------------------------------------------------------------*/
.lds-circle{
display:inline-block;
width:40px;
height:40px;
border-radius:50%;
animation:lds-circle 2.4s cubic-bezier(0,0.2,0.8,1) infinite;
}
@keyframes lds-circle{
0%,100%{
animation-timing-function:cubic-bezier(0.5,0,1,0.5);
}
0%{
transform:rotateY(0deg);
}
50%{
transform:rotateY(1800deg);
animation-timing-function:cubic-bezier(0,0.5,0.5,1);
}
100%{
transform:rotateY(3600deg);
}
}
/*--------------------------------------------------------------
# lds-default
--------------------------------------------------------------*/
.lds-default{
display:inline-block;
position:relative;
width:80px;
height:80px;
div{
position:absolute;
width:6px;
height:6px;
border-radius:50%;
animation:lds-default 1.2s linear infinite;
&:nth-child(1){
animation-delay:0s;
top:37px;
left:66px;
}
&:nth-child(2){
animation-delay:-0.1s;
top:22px;
left:62px;
}
&:nth-child(3){
animation-delay:-0.2s;
top:11px;
left:52px;
}
&:nth-child(4){
animation-delay:-0.3s;
top:7px;
left:37px;
}
&:nth-child(5){
animation-delay:-0.4s;
top:11px;
left:22px;
}
&:nth-child(6){
animation-delay:-0.5s;
top:22px;
left:11px;
}
&:nth-child(7){
animation-delay:-0.6s;
top:37px;
left:7px;
}
&:nth-child(8){
animation-delay:-0.7s;
top:52px;
left:11px;
}
&:nth-child(9){
animation-delay:-0.8s;
top:62px;
left:22px;
}
&:nth-child(10){
animation-delay:-0.9s;
top:66px;
left:37px;
}
&:nth-child(11){
animation-delay:-1s;
top:62px;
left:52px;
}
&:nth-child(12){
animation-delay:-1.1s;
top:52px;
left:62px;
}
}
}
@keyframes lds-default{
0%,20%,80%,100%{
transform:scale(1);
}
50%{
transform:scale(1.5);
}
}
/*--------------------------------------------------------------
# lds-dual-ring
--------------------------------------------------------------*/
.lds-dual-ring{
display:inline-block;
width:80px;
height:80px;
&:after{
content:" ";
display:block;
width:64px;
height:64px;
margin:8px;
border-radius:50%;
border-width:6px;
border-style:solid;
border-right-color:transparent;
border-left-color:transparent;
animation:lds-dual-ring 1.2s linear infinite;
}
}
@keyframes lds-dual-ring{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
/*--------------------------------------------------------------
# lds-ellipsis
--------------------------------------------------------------*/
.lds-ellipsis{
display:inline-block;
position:relative;
width:80px;
height:80px;
div{
position:absolute;
top:33px;
width:13px;
height:13px;
border-radius:50%;
animation-timing-function:cubic-bezier(0,1,1,0);
&:nth-child(1){
left:8px;
animation:lds-ellipsis1 0.6s infinite;
}
&:nth-child(2){
left:8px;
animation:lds-ellipsis2 0.6s infinite;
}
&:nth-child(3){
left:32px;
animation:lds-ellipsis2 0.6s infinite;
}
&:nth-child(4){
left:56px;
animation:lds-ellipsis3 0.6s infinite;
}
}
}
@keyframes lds-ellipsis1{
0%{
transform:scale(0);
}
100%{
transform:scale(1);
}
}
@keyframes lds-ellipsis3{
0%{
transform:scale(1);
}
100%{
transform:scale(0);
}
}
@keyframes lds-ellipsis2{
0%{
transform:translate(0,0);
}
100%{
transform:translate(24px,0);
}
}
/*--------------------------------------------------------------
# lds-facebook
--------------------------------------------------------------*/
.lds-facebook{
display:inline-block;
position:relative;
width:80px;
height:80px;
div{
display:inline-block;
position:absolute;
left:8px;
width:16px;
animation:lds-facebook 1.2s cubic-bezier(0,0.5,0.5,1) infinite;
&:nth-child(1){
left:8px;
animation-delay:-0.24s;
}
&:nth-child(2){
left:32px;
animation-delay:-0.12s;
}
&:nth-child(3){
left:56px;
animation-delay:0;
}
}
}
@keyframes lds-facebook{
0%{
top:8px;
height:64px;
}
50%,100%{
top:24px;
height:32px;
}
}
/*--------------------------------------------------------------
# lds-grid
--------------------------------------------------------------*/
.lds-grid{
display:inline-block;
position:relative;
width:80px;
height:80px;
div{
position:absolute;
width:16px;
height:16px;
border-radius:50%;
animation:lds-grid 1.2s linear infinite;
&:nth-child(1){
top:8px;
left:8px;
animation-delay:0s;
}
&:nth-child(2){
top:8px;
left:32px;
animation-delay:-0.4s;
}
&:nth-child(3){
top:8px;
left:56px;
animation-delay:-0.8s;
}
&:nth-child(4){
top:32px;
left:8px;
animation-delay:-0.4s;
}
&:nth-child(5){
top:32px;
left:32px;
animation-delay:-0.8s;
}
&:nth-child(6){
top:32px;
left:56px;
animation-delay:-1.2s;
}
&:nth-child(7){
top:56px;
left:8px;
animation-delay:-0.8s;
}
&:nth-child(8){
top:56px;
left:32px;
animation-delay:-1.2s;
}
&:nth-child(9){
top:56px;
left:56px;
animation-delay:-1.6s;
}
}
}
@keyframes lds-grid{
0%,100%{
opacity:1;
}
50%{
opacity:0.5;
}
}
/*--------------------------------------------------------------
# lds-heart
--------------------------------------------------------------*/
.lds-heart{
display:inline-block;
position:relative;
width:80px;
height:80px;
transform:rotate(45deg);
transform-origin:40px 40px;
div{
top:32px;
left:32px;
position:absolute;
width:32px;
height:32px;
animation:lds-heart 1.2s infinite cubic-bezier(0.215,0.61,0.355,1);
&:after,
&:before{
content:" ";
position:absolute;
display:block;
width:32px;
height:32px;
}
&:before{
left:-24px;
border-radius:50% 0 0 50%;
}
&:after{
top:-24px;
border-radius:50% 50% 0 0;
}
}
}
@keyframes lds-heart{
0%{
transform:scale(0.95);
}
5%{
transform:scale(1.1);
}
39%{
transform:scale(0.85);
}
45%{
transform:scale(1);
}
60%{
transform:scale(0.95);
}
100%{
transform:scale(0.9);
}
}
/*--------------------------------------------------------------
# sk-rotating-plane
--------------------------------------------------------------*/
.lds-hourglass{
display:inline-block;
position:relative;
width:80px;
height:80px;
&:after{
content:" ";
display:block;
border-radius:50%;
width:0;
height:0;
margin:8px;
box-sizing:border-box;
border-width:32px;
border-style:solid;
border-left-color:transparent;
border-right-color:transparent;
animation:lds-hourglass 1.2s infinite;
}
}
@keyframes lds-hourglass{
0%{
transform:rotate(0);
animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);
}
50%{
transform:rotate(900deg);
animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);
}
100%{
transform:rotate(1800deg);
}
}
/*--------------------------------------------------------------
# lds-ring
--------------------------------------------------------------*/
.lds-ring{
display:inline-block;
position:relative;
width:80px;
height:80px;
div{
box-sizing:border-box;
display:block;
position:absolute;
width:64px;
height:64px;
margin:8px;
border-width:8px;
border-style:solid;
border-radius:50%;
animation:lds-ring 1.2s cubic-bezier(0.5,0,0.5,1) infinite;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
&:nth-child(1){
animation-delay:-0.45s;
}
&:nth-child(2){
animation-delay:-0.3s;
}
&:nth-child(3){
animation-delay:-0.15s;
}
}
}
@keyframes lds-ring{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
/*--------------------------------------------------------------
# lds-ripple
--------------------------------------------------------------*/
.lds-ripple{
display:inline-block;
position:relative;
width:80px;
height:80px;
div{
position:absolute;
border-width:4px;
border-style:solid;
opacity:1;
border-radius:50%;
animation:lds-ripple 1s cubic-bezier(0,0.2,0.8,1) infinite;
&:nth-child(2){
animation-delay:-0.5s;
}
}
}
@keyframes lds-ripple{
0%{
top:36px;
left:36px;
width:0;
height:0;
opacity:1;
}
100%{
top:0px;
left:0px;
width:72px;
height:72px;
opacity:0;
}
}
/*--------------------------------------------------------------
# lds-roller
--------------------------------------------------------------*/
.lds-roller{
display:inline-block;
position:relative;
width:80px;
height:80px;
div{
animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;
transform-origin:40px 40px;
&:after{
content:" ";
display:block;
position:absolute;
width:7px;
height:7px;
border-radius:50%;
margin:-4px 0 0 -4px;
}
&:nth-child(1){
animation-delay:-0.036s;
}
&:nth-child(1):after{
top:63px;
left:63px;
}
&:nth-child(2){
animation-delay:-0.072s;
}
&:nth-child(2):after{
top:68px;
left:56px;
}
&:nth-child(3){
animation-delay:-0.108s;
}
&:nth-child(3):after{
top:71px;
left:48px;
}
&:nth-child(4){
animation-delay:-0.144s;
}
&:nth-child(4):after{
top:72px;
left:40px;
}
&:nth-child(5){
animation-delay:-0.18s;
}
&:nth-child(5):after{
top:71px;
left:32px;
}
&:nth-child(6){
animation-delay:-0.216s;
}
&:nth-child(6):after{
top:68px;
left:24px;
}
&:nth-child(7){
animation-delay:-0.252s;
}
&:nth-child(7):after{
top:63px;
left:17px;
}
&:nth-child(8){
animation-delay:-0.288s;
}
&:nth-child(8):after{
top:56px;
left:12px;
}
}
}
@keyframes lds-roller{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
/*--------------------------------------------------------------
# lds-spinner
--------------------------------------------------------------*/
.lds-spinner{
color:official;
display:inline-block;
position:relative;
width:80px;
height:80px;
div{
transform-origin:40px 40px;
animation:lds-spinner 1.2s linear infinite;
&:after{
content:" ";
display:block;
position:absolute;
top:3px;
left:37px;
width:6px;
height:18px;
border-radius:20%;
}
&:nth-child(1){
transform:rotate(0deg);
animation-delay:-1.1s;
}
&:nth-child(2){
transform:rotate(30deg);
animation-delay:-1s;
}
&:nth-child(3){
transform:rotate(60deg);
animation-delay:-0.9s;
}
&:nth-child(4){
transform:rotate(90deg);
animation-delay:-0.8s;
}
&:nth-child(5){
transform:rotate(120deg);
animation-delay:-0.7s;
}
&:nth-child(6){
transform:rotate(150deg);
animation-delay:-0.6s;
}
&:nth-child(7){
transform:rotate(180deg);
animation-delay:-0.5s;
}
&:nth-child(8){
transform:rotate(210deg);
animation-delay:-0.4s;
}
&:nth-child(9){
transform:rotate(240deg);
animation-delay:-0.3s;
}
&:nth-child(10){
transform:rotate(270deg);
animation-delay:-0.2s;
}
&:nth-child(11){
transform:rotate(300deg);
animation-delay:-0.1s;
}
&:nth-child(12){
transform:rotate(330deg);
animation-delay:0s;
}
}
}
@keyframes lds-spinner{
0%{
opacity:1;
}
100%{
opacity:0;
}
}