File: /var/www/html/wpprm/wp-content/themes/ronneby/assets/less/site-preloader.less
/*------------------------------------------------------------------
[Site Preloader Stylesheet]
Project: Ronneby theme
Version: 1.0
Last change: 16/06/15
Assigned to: DFD
Primary use: Site preloader styles
-------------------------------------------------------------------*/
@import "../less.lib/variables.less";
@import "../less.lib/sb_mixins.less";
@-webkit-keyframes dfdPreloaderAnimation {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes dfdPreloaderAnimation {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
@-o-keyframes dfdPreloaderAnimation {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); }
}
@keyframes dfdPreloaderAnimation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-webkit-keyframes dfdPreloaderAnimationSecond {
0% { -webkit-transform: scale(0); opacity: 1; }
100% { -webkit-transform: scale(1); opacity: 0; }
}
@-moz-keyframes dfdPreloaderAnimationSecond {
0% { -moz-transform: scale(0); opacity: 1; }
100% { -moz-transform: scale(1); opacity: 0; }
}
@-o-keyframes dfdPreloaderAnimationSecond {
0% { -o-transform: scale(0); opacity: 1; }
100% { -o-transform: scale(1); opacity: 0; }
}
@keyframes dfdPreloaderAnimationSecond {
0% { transform: scale(0); opacity: 1; }
100% { transform: scale(1); opacity: 0; }
}
@-webkit-keyframes dfdPreloaderAnimationFourth {
0% { -webkit-transform: rotate(0deg) scale(1);}
40% { -webkit-transform: rotate(180deg) scale(.7);}
50% { -webkit-transform: rotate(180deg) scale(.7);}
90% { -webkit-transform: rotate(360deg) scale(1);}
100% { -webkit-transform: rotate(360deg) scale(1);}
}
@-moz-keyframes dfdPreloaderAnimationFourth {
0% { -moz-transform: rotate(0deg) scale(1);}
40% { -moz-transform: rotate(180deg) scale(.7);}
50% { -moz-transform: rotate(180deg) scale(.7);}
90% { -moz-transform: rotate(360deg) scale(1);}
100% { -moz-transform: rotate(360deg) scale(1);}
}
@-o-keyframes dfdPreloaderAnimationFourth {
0% { -o-transform: rotate(0deg) scale(1);}
40% { -o-transform: rotate(180deg) scale(.7);}
50% { -o-transform: rotate(180deg) scale(.7);}
90% { -o-transform: rotate(360deg) scale(1);}
100% { -o-transform: rotate(360deg) scale(1);}
}
@keyframes dfdPreloaderAnimationFourth {
0% { transform: rotate(0deg) scale(1);}
40% { transform: rotate(180deg) scale(.7);}
50% { transform: rotate(180deg) scale(.7);}
90% { transform: rotate(360deg) scale(1);}
100% { transform: rotate(360deg) scale(1);}
}
@-webkit-keyframes dfdPreloaderAnimationSixth {
0%, 40%, 100% { margin-top: -15px;}
20% { margin-top: -5px;}
}
@-moz-keyframes dfdPreloaderAnimationSixth {
0%, 40%, 100% { margin-top: -15px;}
20% { margin-top: -5px;}
}
@-o-keyframes dfdPreloaderAnimationSixth {
0%, 40%, 100% { margin-top: -15px;}
20% { margin-top: -5px;}
}
@keyframes dfdPreloaderAnimationSixth {
0%, 40%, 100% { margin-top: -5px;}
20% { margin-top: -15px;}
}
@-webkit-keyframes dfdPreloaderAnimationSeventh {
0% {
-webkit-transform: translateX(0px) translateY(0px);
}
12.5% {
-webkit-transform: translateX(27.5px) translateY(-57px) scale(1.1);
.opacity(1);
}
25% {
-webkit-transform: translateX(55px) translateY(0px);
-webkit-animation-timing-function: ease-out;
}
37.5% {
-webkit-transform: translateX(27.5px) translateY(57px);
}
50% {
-webkit-transform: translateX(0px) translateY(0px);
}
62.5% {
-webkit-transform: translateX(-27.5px) translateY(-57px) scale(1.1);
-webkit-animation-timing-function: ease-in;
}
75% {
-webkit-transform: translateX(-55px) translateY(0px);
-webkit-animation-timing-function: ease-out;
}
87.5% {
-webkit-transform: translateX(-27.5px) translateY(57px);
}
100% {
-webkit-transform: translateX(0px) translateY(0px);
}
}
@-moz-keyframes dfdPreloaderAnimationSeventh {
0% {
-moz-transform: translateX(0px) translateY(0px);
}
12.5% {
-moz-transform: translateX(27.5px) translateY(-57px) scale(1.1);
.opacity(1);
}
25% {
-moz-transform: translateX(55px) translateY(0px);
-moz-animation-timing-function: ease-out;
}
37.5% {
-moz-transform: translateX(27.5px) translateY(57px);
}
50% {
-moz-transform: translateX(0px) translateY(0px);
}
62.5% {
-moz-transform: translateX(-27.5px) translateY(-57px) scale(1.1);
-moz-animation-timing-function: ease-in;
}
75% {
-moz-transform: translateX(-55px) translateY(0px);
-moz-animation-timing-function: ease-out;
}
87.5% {
-moz-transform: translateX(-27.5px) translateY(57px);
}
100% {
-moz-transform: translateX(0px) translateY(0px);
}
}
@-o-keyframes dfdPreloaderAnimationSeventh {
0% {
-o-transform: translateX(0px) translateY(0px);
}
12.5% {
-o-transform: translateX(27.5px) translateY(-57px) scale(1.1);
.opacity(1);
}
25% {
-o-transform: translateX(55px) translateY(0px);
-o-animation-timing-function: ease-out;
}
37.5% {
-o-transform: translateX(27.5px) translateY(57px);
}
50% {
-o-transform: translateX(0px) translateY(0px);
}
62.5% {
-o-transform: translateX(-27.5px) translateY(-57px) scale(1.1);
-o-animation-timing-function: ease-in;
}
75% {
-o-transform: translateX(-55px) translateY(0px);
-o-animation-timing-function: ease-out;
}
87.5% {
-o-transform: translateX(-27.5px) translateY(57px);
}
100% {
-o-transform: translateX(0px) translateY(0px);
}
}
@keyframes dfdPreloaderAnimationSeventh {
0% {
transform: translateX(0px) translateY(0px);
}
12.5% {
transform: translateX(27.5px) translateY(-57px) scale(1.1);
.opacity(1);
}
25% {
transform: translateX(55px) translateY(0px);
animation-timing-function: ease-out;
}
37.5% {
transform: translateX(27.5px) translateY(57px);
}
50% {
transform: translateX(0px) translateY(0px);
}
62.5% {
transform: translateX(-27.5px) translateY(-57px) scale(1.1);
animation-timing-function: ease-in;
}
75% {
transform: translateX(-55px) translateY(0px);
animation-timing-function: ease-out;
}
87.5% {
transform: translateX(-27.5px) translateY(57px);
}
100% {
transform: translateX(0px) translateY(0px);
}
}
@-webkit-keyframes dfdPreloaderAnimationEighth {
0% {
margin-top: -5px;
}
40% {
margin-top: -5px;
.opacity(.7);
}
60% {
margin-top: 15px;
.opacity(.5);
}
80% {
margin-top: -25px;
}
100% {
.opacity(.7);
margin-top: 0;
}
}
@-moz-keyframes dfdPreloaderAnimationEighth {
0% {
margin-top: -5px;
}
40% {
margin-top: -5px;
.opacity(.7);
}
60% {
margin-top: 15px;
.opacity(.5);
}
80% {
margin-top: -25px;
}
100% {
.opacity(.7);
margin-top: 0;
}
}
@-o-keyframes dfdPreloaderAnimationEighth {
0% {
margin-top: -5px;
}
40% {
margin-top: -5px;
.opacity(.7);
}
60% {
margin-top: 15px;
.opacity(.5);
}
80% {
margin-top: -25px;
}
100% {
.opacity(.7);
margin-top: 0;
}
}
@keyframes dfdPreloaderAnimationEighth {
0% {
margin-top: -5px;
}
40% {
margin-top: -5px;
.opacity(.7);
}
60% {
margin-top: 15px;
.opacity(.5);
}
80% {
margin-top: -25px;
}
100% {
.opacity(.7);
margin-top: 0;
}
}
@-webkit-keyframes dfdPreloaderAnimationNinth {
0%, 100% {
-webkit-transform: scale(0);
}
50% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes dfdPreloaderAnimationNinth {
0%, 100% {
-moz-transform: scale(0);
}
50% {
-moz-transform: scale(1);
}
}
@-o-keyframes dfdPreloaderAnimationNinth {
0%, 100% {
-o-transform: scale(0);
}
50% {
-o-transform: scale(1);
}
}
@keyframes dfdPreloaderAnimationNinth {
0%, 100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
@-webkit-keyframes dfdPreloaderAnimationTenth {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@-moz-keyframes dfdPreloaderAnimationTenth {
0%, 40%, 100% { -moz-transform: scaleY(0.4) }
20% { -moz-transform: scaleY(1.0) }
}
@-o-keyframes dfdPreloaderAnimationTenth {
0%, 40%, 100% { -o-transform: scaleY(0.4) }
20% { -o-transform: scaleY(1.0) }
}
@keyframes dfdPreloaderAnimationTenth {
0%, 40%, 100% { transform: scaleY(0.4) }
20% { transform: scaleY(1.0) }
}
@-webkit-keyframes dfdPreloaderAnimationEleventh {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@-moz-keyframes dfdPreloaderAnimationEleventh {
0% { -moz-transform: perspective(120px) }
50% { -moz-transform: perspective(120px) rotateY(180deg) }
100% { -moz-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@-o-keyframes dfdPreloaderAnimationEleventh {
0% { -o-transform: perspective(120px) }
50% { -o-transform: perspective(120px) rotateY(180deg) }
100% { -o-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@keyframes dfdPreloaderAnimationEleventh {
0% { transform: perspective(120px) }
50% { transform: perspective(120px) rotateY(180deg) }
100% { transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@-webkit-keyframes dfdPreloaderAnimationTwelfth {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@-moz-keyframes dfdPreloaderAnimationTwelfth {
0%, 80%, 100% { -moz-transform: scale(0.0) }
40% { -moz-transform: scale(1.0) }
}
@-o-keyframes dfdPreloaderAnimationTwelfth {
0%, 80%, 100% { -o-transform: scale(0.0) }
40% { -o-transform: scale(1.0) }
}
@keyframes dfdPreloaderAnimationTwelfth {
0%, 80%, 100% { transform: scale(0.0) }
40% { transform: scale(1.0) }
}
@-webkit-keyframes dfdPreloaderAnimationThirteenth {
0%, 75%, 100% {
height: 12px;
}
15% {
opacity: 1;
height: 24px;
}
}
@-moz-keyframes dfdPreloaderAnimationThirteenth {
0%, 75%, 100% {
height: 12px;
}
15% {
opacity: 1;
height: 24px;
}
}
@-o-keyframes dfdPreloaderAnimationThirteenth {
0%, 75%, 100% {
height: 12px;
}
15% {
opacity: 1;
height: 24px;
}
}
@keyframes dfdPreloaderAnimationThirteenth {
0%, 75%, 100% {
height: 12px;
}
15% {
opacity: 1;
height: 24px;
}
}
@-webkit-keyframes dfdPreloaderAnimationSixteenth {
0%, 100% {
margin-top: 0;
-webkit-transform: scale(.5);
}
50% {
margin-top: 40px;
-webkit-transform: scale(1.5);
}
}
@-moz-keyframes dfdPreloaderAnimationSixteenth {
0%, 100% {
margin-top: 0;
-moz-transform: scale(.5);
}
50% {
margin-top: 40px;
-moz-transform: scale(1.5);
}
}
@-o-keyframes dfdPreloaderAnimationSixteenth {
0%, 100% {
margin-top: 0;
-o-transform: scale(.5);
}
50% {
margin-top: 40px;
-o-transform: scale(1.5);
}
}
@keyframes dfdPreloaderAnimationSixteenth {
0%, 100% {
margin-top: 0;
transform: scale(.5);
}
50% {
margin-top: 40px;
transform: scale(1.5);
}
}
body {
&.admin-bar {
#qLoverlay {
#qLbar_wrap {
#qLbar {
&.dfd-preloader-bar-top {
top: 32px;
}
}
}
}
&.dfd-custom-padding-html {
#qLoverlay {
#qLbar_wrap {
#qLbar {
&.dfd-preloader-bar-top {
top: @layout-white-space-size + 32;
}
}
}
}
}
}
&.dfd-custom-padding-html {
#qLoverlay {
#qLbar_wrap {
#qLbar {
&.dfd-preloader-bar-top {
top: @layout-white-space-size + 32;
}
&.dfd-preloader-bar-bottom {
bottom: @layout-white-space-size;
}
}
}
}
}
}
#qLoverlay {
position: fixed;
top: 0;
left: 0;
.block();
width: 100%;
height: 100%;
background: @third-site-dark-color;
z-index: 99999;
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
#qLbar_wrap {
.block();
.abs();
top: 0; bottom: 0;
left: 0; right: 0;
//background: transparent;
background: @third-site-dark-color;
&.dfd-percentage-enabled {
#dfd-preloader-animation {
&.dfd-preloader-style-1,
&.dfd-preloader-style-3,
&.dfd-preloader-style-4,
&.dfd-preloader-style-5,
&.dfd-preloader-style-11,
&.dfd-preloader-style-12,
&.dfd-preloader-style-13 {
margin-top: 48px;
}
&.dfd-preloader-style-2 {
margin-top: 54px;
}
&.dfd-preloader-style-10,
&.dfd-preloader-style-16 {
margin-top: 30px;
}
&.dfd-preloader-style-6 > span,
&.dfd-preloader-style-8 > span {
.transform(translateY(30px));
}
&.dfd-preloader-style-7 {
margin-top: -75px;
}
&.dfd-preloader-style-9 > span {
margin-top: 40px;
}
&.dfd-preloader-style-14 span.item-one {
margin-top: 24px !important;
}
&.dfd-preloader-style-14 span.item-two {
margin-top: 32px !important;
}
&.dfd-preloader-style-15 span.item-one {
margin-top: 24px !important;
}
&.dfd-preloader-style-15 span.item-two {
margin-top: 32px !important;
}
}
.qLbar-img {
.translate(-50%; 0%);
}
&.dfd_preloader_css_animation,
&.dfd_preloader_image {
+ #qLpercentage {
.transform(translateY(-100%));
}
}
}
#qLbar {
.abs();
left: 0;
width: 100%;
height: 100%;
.opacity(1);
.transition(opacity .3s ease);
&.dfd-preloader-bar-top {
top: 0;
}
&.dfd-preloader-bar-middle {
top: 50%;
.transform(translateY(-50%));
}
&.dfd-preloader-bar-bottom {
bottom: 0;
}
}
#dfd-preloader-animation {
&.dfd-preloader-style-1 {
@s: 48px;
.abs();
top: 50%;
left: 50%;
.block();
width: @s;
height: @s;
margin-top: -@s/2;
margin-left: -@s/2;
border: 1px solid fade(@main-site-dark-color, 20%);
border-top-color: @main-site-dark-color;
.rounded(50%);
z-index: 999999;
-webkit-animation: dfdPreloaderAnimation .8s linear infinite;
-moz-animation: dfdPreloaderAnimation .8s linear infinite;
-o-animation: dfdPreloaderAnimation .8s linear infinite;
-ms-animation: dfdPreloaderAnimation .8s linear infinite;
animation: dfdPreloaderAnimation .8s linear infinite;
span {
.hide();
}
}
&.dfd-preloader-style-2 {
@s: 54px;
.abs();
width: 100%;
height: 100%;
z-index: 999999;
> span.item-one,
> span.item-two {
.block();
width: @s;
height: @s;
.abs();
top: 50%;
left: 50%;
margin-top: -@s/2;
margin-left: -@s/2;
background: transparent;
border: 4px solid @main-site-dark-color;
.rounded(50%);
.opacity(0);
}
> span.item-one {
-webkit-animation: dfdPreloaderAnimationSecond 2s ease infinite;
-moz-animation: dfdPreloaderAnimationSecond 2s ease infinite;
-o-animation: dfdPreloaderAnimationSecond 2s ease infinite;
animation: dfdPreloaderAnimationSecond 2s ease infinite;
}
> span.item-two {
-webkit-animation: dfdPreloaderAnimationSecond 2s 1s ease infinite;
-moz-animation: dfdPreloaderAnimationSecond 2s 1s ease infinite;
-o-animation: dfdPreloaderAnimationSecond 2s 1s ease infinite;
animation: dfdPreloaderAnimationSecond 2s 1s ease infinite;
}
> span {
&.item-three,
&.item-four,
&.item-five {
.hide();
}
}
}
&.dfd-preloader-style-3 {
@s: 48px;
.abs();
top: 50%;
left: 50%;
.block();
width: @s;
height: @s;
margin-top: -@s/2;
margin-left: -@s/2;
//border: 1px solid fade(@main-site-dark-color, 20%);
border-top: 2px solid @main-site-dark-color;
.rounded(50%);
z-index: 999999;
-webkit-animation: dfdPreloaderAnimation 1.5s linear infinite;
-moz-animation: dfdPreloaderAnimation 1.5s linear infinite;
-o-animation: dfdPreloaderAnimation 1.5s linear infinite;
-ms-animation: dfdPreloaderAnimation 1.5s linear infinite;
animation: dfdPreloaderAnimation 1.5s linear infinite;
span {
.hide();
}
}
&.dfd-preloader-style-4 {
@s: 48px;
.abs();
top: 50%;
left: 50%;
.block();
width: @s;
height: @s;
margin-top: -@s/2;
margin-left: -@s/2;
border: 2px solid fade(@main-site-dark-color, 20%);
border-top-color: @main-site-dark-color;
.rounded(50%);
z-index: 999999;
-webkit-animation: dfdPreloaderAnimationFourth 1.6s ease infinite;
-moz-animation: dfdPreloaderAnimationFourth 1.6s ease infinite;
-o-animation: dfdPreloaderAnimationFourth 1.6s ease infinite;
-ms-animation: dfdPreloaderAnimationFourth 1.6s ease infinite;
animation: dfdPreloaderAnimationFourth 1.6s ease infinite;
span {
.hide();
}
}
&.dfd-preloader-style-5 {
@s: 48px;
.abs();
top: 50%;
left: 50%;
.block();
width: @s;
height: @s;
margin-top: -@s/2;
margin-left: -@s/2;
background: -webkit-linear-gradient(@main-site-dark-color -50%,transparent 70%);
background: -moz-linear-gradient(@main-site-dark-color -50%,transparent 70%);
background: -o-linear-gradient(@main-site-dark-color -50%,transparent 70%);
background: -ms-linear-gradient(@main-site-dark-color -50%,transparent 70%);
background: linear-gradient(@main-site-dark-color -50%,transparent 70%);
.rounded(50%);
-webkit-animation: dfdPreloaderAnimation 6s linear infinite;
-moz-animation: dfdPreloaderAnimation 6s linear infinite;
-o-animation: dfdPreloaderAnimation 6s linear infinite;
-ms-animation: dfdPreloaderAnimation 6s linear infinite;
animation: dfdPreloaderAnimation 6s linear infinite;
span {
.hide();
}
}
&.dfd-preloader-style-6 {
> span {
@dot-s: 10px;
.block();
width: @dot-s;
height: @dot-s;
.abs();
top: 50%;
left: 50%;
margin-top: -@dot-s/2;
background: @main-site-dark-color;
-webkit-animation: dfdPreloaderAnimationSixth .7s linear infinite;
-moz-animation: dfdPreloaderAnimationSixth .7s linear infinite;
-o-animation: dfdPreloaderAnimationSixth .7s linear infinite;
-ms-animation: dfdPreloaderAnimationSixth .7s linear infinite;
animation: dfdPreloaderAnimationSixth .7s linear infinite;
.rounded(50%);
&.item-one {
margin-left: -@dot-s*2.75;
-webkit-animation-delay: -0.6s;
-moz-animation-delay: -0.6s;
-o-animation-delay: -0.6s;
-ms-animation-delay: -0.6s;
animation-delay: -0.6s;
}
&.item-two {
margin-left: -@dot-s*1.25;
-webkit-animation-delay: -0.5s;
-moz-animation-delay: -0.5s;
-o-animation-delay: -0.5s;
-ms-animation-delay: -0.5s;
animation-delay: -0.5s;
}
&.item-three {
margin-left: @dot-s*0.25;
-webkit-animation-delay: -0.4s;
-moz-animation-delay: -0.4s;
-o-animation-delay: -0.4s;
-ms-animation-delay: -0.4s;
animation-delay: -0.4s;
}
&.item-four {
margin-left: @dot-s*1.75;
-webkit-animation-delay: -0.3s;
-moz-animation-delay: -0.3s;
-o-animation-delay: -0.3s;
-ms-animation-delay: -0.3s;
animation-delay: -0.3s;
}
&.item-five {
.hide();
}
}
}
&.dfd-preloader-style-7 {
@box-size: 300px;
@dot-size: 10px;
.block();
width: @box-size;
height: @box-size;
.abs();
top: 50%;
left: 50%;
margin-top: -@box-size/2;
margin-left: -@box-size/2;
> span {
.block();
width: @dot-size;
height: @dot-size;
.abs();
margin-top: @box-size/2;
margin-left: @box-size/2;
background: @main-site-dark-color;
.opacity(.7);
.rounded(50%);
-webkit-animation: dfdPreloaderAnimationSeventh 2.1s linear infinite;
-moz-animation: dfdPreloaderAnimationSeventh 2.1s linear infinite;
-o-animation: dfdPreloaderAnimationSeventh 2.1s linear infinite;
-ms-animation: dfdPreloaderAnimationSeventh 2.1s linear infinite;
animation: dfdPreloaderAnimationSeventh 2.1s linear infinite;
&.item-one {
-webkit-animation-delay: -0.7s;
-moz-animation-delay: -0.7s;
-o-animation-delay: -0.7s;
-ms-animation-delay: -0.7s;
animation-delay: -0.7s;
}
&.item-two {
-webkit-animation-delay: -1.4s;
-moz-animation-delay: -1.4s;
-o-animation-delay: -1.4s;
-ms-animation-delay: -1.4s;
animation-delay: -1.4s;
}
&.item-three {
}
&.item-four,
&.item-five {
.hide();
}
}
}
&.dfd-preloader-style-8 {
> span {
@dot-s: 10px;
.block();
width: @dot-s;
height: @dot-s;
.abs();
top: 50%;
left: 50%;
margin-top: -@dot-s/2;
background: @main-site-dark-color;
-webkit-animation: dfdPreloaderAnimationEighth 2.6s cubic-bezier(.626,0,0,1) infinite;
-moz-animation: dfdPreloaderAnimationEighth 2.6s cubic-bezier(.626,0,0,1) infinite;
-o-animation: dfdPreloaderAnimationEighth 2.6s cubic-bezier(.626,0,0,1) infinite;
-ms-animation: dfdPreloaderAnimationEighth 2.6s cubic-bezier(.626,0,0,1) infinite;
animation: dfdPreloaderAnimationEighth 2.6s cubic-bezier(.626,0,0,1) infinite;
.rounded(50%);
&.item-one {
margin-left: -@dot-s*2.75;
-webkit-animation-delay: -0.34667s;
-moz-animation-delay: -0.34667s;
-o-animation-delay: -0.34667s;
-ms-animation-delay: -0.34667s;
animation-delay: -0.34667s;
}
&.item-two {
margin-left: -@dot-s*1.25;
-webkit-animation-delay: -0.26s;
-moz-animation-delay: -0.26s;
-o-animation-delay: -0.26s;
-ms-animation-delay: -0.26s;
animation-delay: -0.26s;
}
&.item-three {
margin-left: @dot-s*0.25;
-webkit-animation-delay: -0.17333s;
-moz-animation-delay: -0.17333s;
-o-animation-delay: -0.17333s;
-ms-animation-delay: -0.17333s;
animation-delay: -0.17333s;
}
&.item-four {
margin-left: @dot-s*1.75;
-webkit-animation-delay: -0.08667s;
-moz-animation-delay: -0.08667s;
-o-animation-delay: -0.08667s;
-ms-animation-delay: -0.08667s;
animation-delay: -0.08667s;
}
&.item-five {
.hide();
}
}
}
&.dfd-preloader-style-9 {
> span {
@s: 40px;
.block();
width: @s;
height: @s;
.abs();
top: 50%;
left: 50%;
margin-top: -@s/2;
margin-left: -@s/2;
background: @main-site-dark-color;
.rounded(50%);
.opacity(.6);
-webkit-animation: dfdPreloaderAnimationNinth 2.0s infinite ease-in-out;
-moz-animation: dfdPreloaderAnimationNinth 2.0s infinite ease-in-out;
-o-animation: dfdPreloaderAnimationNinth 2.0s infinite ease-in-out;
-ms-animation: dfdPreloaderAnimationNinth 2.0s infinite ease-in-out;
animation: dfdPreloaderAnimationNinth 2.0s infinite ease-in-out;
&.item-two {
-webkit-animation-delay: -1s;
-moz-animation-delay: -1s;
-o-animation-delay: -1s;
-ms-animation-delay: -1s;
animation-delay: -1s;
}
&.item-three,
&.item-four,
&.item-five {
.hide();
}
}
}
&.dfd-preloader-style-10 {
.block();
width: 44px;
height: 30px;
.abs();
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -22px;
> span {
width: 6px;
height: 100%;
float: left;
margin-right: 5px;
background: @main-site-dark-color;
-webkit-animation: dfdPreloaderAnimationTenth 1.2s infinite ease-in-out;
-moz-animation: dfdPreloaderAnimationTenth 1.2s infinite ease-in-out;
-o-animation: dfdPreloaderAnimationTenth 1.2s infinite ease-in-out;
-ms-animation: dfdPreloaderAnimationTenth 1.2s infinite ease-in-out;
animation: dfdPreloaderAnimationTenth 1.2s infinite ease-in-out;
}
> span {
&.item-one {
}
&.item-two {
-webkit-animation-delay: -1.1s;
-moz-animation-delay: -1.1s;
-o-animation-delay: -1.1s;
-ms-animation-delay: -1.1s;
animation-delay: -1.1s;
}
&.item-three {
-webkit-animation-delay: -1s;
-moz-animation-delay: -1s;
-o-animation-delay: -1s;
-ms-animation-delay: -1s;
animation-delay: -1s;
}
&.item-four {
margin-right: 0;
-webkit-animation-delay: -0.9s;
-moz-animation-delay: -0.9s;
-o-animation-delay: -0.9s;
-ms-animation-delay: -0.9s;
animation-delay: -0.9s;
}
&.item-five {
.hide();
}
}
}
&.dfd-preloader-style-11 {
.block();
width: 40px;
height: 40px;
.abs();
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
background: @main-site-dark-color;
-webkit-animation: dfdPreloaderAnimationEleventh 1.2s infinite ease-in-out;
-moz-animation: dfdPreloaderAnimationEleventh 1.2s infinite ease-in-out;
-o-animation: dfdPreloaderAnimationEleventh 1.2s infinite ease-in-out;
-ms-animation: dfdPreloaderAnimationEleventh 1.2s infinite ease-in-out;
animation: dfdPreloaderAnimationEleventh 1.2s infinite ease-in-out;
> span {
.hide();
}
}
&.dfd-preloader-style-12 {
.block();
width: 70px;
height: 30px;
.abs();
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -35px;
> span {
.block();
width: 18px;
height: 18px;
.abs();
top: 50%;
margin-top: -9px;
background: @main-site-dark-color;
.rounded(50%);
-webkit-animation: dfdPreloaderAnimationTwelfth 1.4s infinite ease-in-out;
-moz-animation: dfdPreloaderAnimationTwelfth 1.4s infinite ease-in-out;
-o-animation: dfdPreloaderAnimationTwelfth 1.4s infinite ease-in-out;
-ms-animation: dfdPreloaderAnimationTwelfth 1.4s infinite ease-in-out;
animation: dfdPreloaderAnimationTwelfth 1.4s infinite ease-in-out;
&.item-one {
left: 0;
-webkit-animation-delay: -0.32s;
-moz-animation-delay: -0.32s;
-o-animation-delay: -0.32s;
-ms-animation-delay: -0.32s;
animation-delay: -0.32s;
}
&.item-two {
left: 50%;
margin-left: -9px;
-webkit-animation-delay: -0.16s;
-moz-animation-delay: -0.16s;
-o-animation-delay: -0.16s;
-ms-animation-delay: -0.16s;
animation-delay: -0.16s;
}
&.item-three {
right: 0;
}
&.item-four,
&.item-five {
.hide();
}
}
}
&.dfd-preloader-style-13 {
.block();
width: 64px;
height: 24px;
.abs();
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -32px;
> span:before {
content: "";
left: 8px;
}
> span,
> span:before {
.block();
width: 6px;
height: 12px;
.abs();
bottom:0;
margin: -10px 2px 0 0;
background-color: @main-site-dark-color;
.rounded(2px);
-webkit-animation: dfdPreloaderAnimationThirteenth 1s infinite ease-in-out alternate;
-moz-animation: dfdPreloaderAnimationThirteenth 1s infinite ease-in-out alternate;
-o-animation: dfdPreloaderAnimationThirteenth 1s infinite ease-in-out alternate;
-ms-animation: dfdPreloaderAnimationThirteenth 1s infinite ease-in-out alternate;
animation: dfdPreloaderAnimationThirteenth 1s infinite ease-in-out alternate;
}
> span.item-five {
.hide();
}
> span.item-one {
left: 0;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
&:before {
-webkit-animation-delay: 500ms;
-moz-animation-delay: 500ms;
-o-animation-delay: 500ms;
animation-delay: 500ms;
}
}
> span.item-two {
left: 16px;
-webkit-animation-delay: 1000ms;
-moz-animation-delay: 1000ms;
-o-animation-delay: 1000ms;
animation-delay: 1000ms;
&:before {
-webkit-animation-delay: 1500ms;
-moz-animation-delay: 1500ms;
-o-animation-delay: 1500ms;
animation-delay: 1500ms;
}
}
> span.item-three {
left: 32px;
-webkit-animation-delay: 2000ms;
-moz-animation-delay: 2000ms;
-o-animation-delay: 2000ms;
animation-delay: 2000ms;
&:before {
-webkit-animation-delay: 2500ms;
-moz-animation-delay: 2500ms;
-o-animation-delay: 2500ms;
animation-delay: 2500ms;
}
}
> span.item-four {
left: 48px;
-webkit-animation-delay: 3000ms;
-moz-animation-delay: 3000ms;
-o-animation-delay: 3000ms;
animation-delay: 3000ms;
&:before {
-webkit-animation-delay: 3500ms;
-moz-animation-delay: 3500ms;
-o-animation-delay: 3500ms;
animation-delay: 3500ms;
}
}
}
&.dfd-preloader-style-14 {
span.item-one {
.block();
width: 24px;
height: 24px;
.abs();
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -12px;
border: 2px solid;
border-color: @main-site-dark-color transparent;
.rounded(50%);
-webkit-animation: dfdPreloaderAnimationFourth 1s infinite cubic-bezier(.09,.57,.49,.9);
-moz-animation: dfdPreloaderAnimationFourth 1s infinite cubic-bezier(.09,.57,.49,.9);
-o-animation: dfdPreloaderAnimationFourth 1s infinite cubic-bezier(.09,.57,.49,.9);
-ms-animation: dfdPreloaderAnimationFourth 1s infinite cubic-bezier(.09,.57,.49,.9);
animation: dfdPreloaderAnimationFourth 1s infinite cubic-bezier(.09,.57,.49,.9);
}
span.item-two {
.block();
width: 8px;
height: 8px;
.abs();
top: 50%;
left: 50%;
margin-top: -4px;
margin-left: -4px;
background: @main-site-dark-color;
.rounded(50%);
-webkit-animation: dfdPreloaderAnimationFourth 1s infinite cubic-bezier(.09,.57,.49,.9);
-moz-animation: dfdPreloaderAnimationFourth 1s infinite cubic-bezier(.09,.57,.49,.9);
-o-animation: dfdPreloaderAnimationFourth 1s infinite cubic-bezier(.09,.57,.49,.9);
-ms-animation: dfdPreloaderAnimationFourth 1s infinite cubic-bezier(.09,.57,.49,.9);
animation: dfdPreloaderAnimationFourth 1s infinite cubic-bezier(.09,.57,.49,.9);
}
span {
&.item-three,
&.item-four,
&.item-five {
.hide();
}
}
}
&.dfd-preloader-style-15 {
span.item-one {
.block();
width: 36px;
height: 36px;
.abs();
top: 50%;
left: 50%;
margin-top: -18px;
margin-left: -18px;
border: 2px solid;
border-color: transparent @main-site-dark-color;
.rounded(50%);
-webkit-animation: dfdPreloaderAnimationFourth 1s infinite ease-in-out;
-moz-animation: dfdPreloaderAnimationFourth 1s infinite ease-in-out;
-o-animation: dfdPreloaderAnimationFourth 1s infinite ease-in-out;
-ms-animation: dfdPreloaderAnimationFourth 1s infinite ease-in-out;
animation: dfdPreloaderAnimationFourth 1s infinite ease-in-out;
}
span.item-two {
.block();
width: 20px;
height: 20px;
.abs();
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
border: 2px solid;
border-color: @main-site-dark-color transparent;
.rounded(50%);
-webkit-animation: dfdPreloaderAnimationFourth .5s infinite ease-in-out;
-moz-animation: dfdPreloaderAnimationFourth .5s infinite ease-in-out;
-o-animation: dfdPreloaderAnimationFourth .5s infinite ease-in-out;
-ms-animation: dfdPreloaderAnimationFourth .5s infinite ease-in-out;
animation: dfdPreloaderAnimationFourth .5s infinite ease-in-out;
-webkit-animation-direction: reverse;
-moz-animation-direction: reverse;
-o-animation-direction: reverse;
-ms-animation-direction: reverse;
animation-direction: reverse;
}
span {
&.item-three,
&.item-four,
&.item-five {
.hide();
}
}
}
&.dfd-preloader-style-16 {
.block();
width: 100px;
height: 50px;
.abs();
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -50px;
span {
.block();
width: 10px;
height: 10px;
.abs();
top: 0;
background: @main-site-dark-color;
.rounded(50%);
-webkit-animation: dfdPreloaderAnimationSixteenth 1s infinite cubic-bezier(.15,.46,.9,.6);
-moz-animation: dfdPreloaderAnimationSixteenth 1s infinite cubic-bezier(.15,.46,.9,.6);
-o-animation: dfdPreloaderAnimationSixteenth 1s infinite cubic-bezier(.15,.46,.9,.6);
-ms-animation: dfdPreloaderAnimationSixteenth 1s infinite cubic-bezier(.15,.46,.9,.6);
animation: dfdPreloaderAnimationSixteenth 1s infinite cubic-bezier(.15,.46,.9,.6);
&.item-one {
left: 0;
margin-left: -5px;
}
&.item-two {
left: 25%;
margin-left: -5px;
-webkit-animation-delay: -.5s;
-moz-animation-delay: -.5s;
-o-animation-delay: -.5s;
-ms-animation-delay: -.5s;
animation-delay: -.5s;
}
&.item-three {
left: 50%;
margin-left: -5px;
}
&.item-four {
right: 25%;
margin-right: -5px;
-webkit-animation-delay: -.5s;
-moz-animation-delay: -.5s;
-o-animation-delay: -.5s;
-ms-animation-delay: -.5s;
animation-delay: -.5s;
}
&.item-five {
right: 0;
margin-right: -5px;
}
}
}
}
.qLbar-img {
.abs();
top: 50%;
left: 50%;
.translate(-50%; -50%);
z-index: 999999;
}
}
#qLpercentage {
.abs();
top: 50%;
.block();
width: 100%;
text-align: center;
}
}