513 lines
12 KiB
CSS
513 lines
12 KiB
CSS
/*--------------------------------------------------------------
|
|
* Preloader CSS MS
|
|
*--------------------------------------------------------------
|
|
*/
|
|
|
|
.wp-smart-loader {
|
|
text-indent: -12345px;
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
* Preloader One
|
|
*--------------------------------------------------------------
|
|
*/
|
|
|
|
.smart-loader-one {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
border-right: 1px solid rgba(0, 0, 0, 0.08);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
border-left: 1px solid rgba(0, 0, 0, 0.5);
|
|
-webkit-border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
-ms-border-radius: 50%;
|
|
border-radius: 50%;
|
|
-webkit-animation: spinner 700ms infinite linear;
|
|
-moz-animation: spinner 700ms infinite linear;
|
|
-ms-animation: spinner 700ms infinite linear;
|
|
-o-animation: spinner 700ms infinite linear;
|
|
animation: spinner 700ms infinite linear;
|
|
}
|
|
|
|
@-webkit-keyframes spinner {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
-moz-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
-moz-transform: rotate(360deg);
|
|
-ms-transform: rotate(360deg);
|
|
-o-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes spinner {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
-moz-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
-moz-transform: rotate(360deg);
|
|
-ms-transform: rotate(360deg);
|
|
-o-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes spinner {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
-moz-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
-moz-transform: rotate(360deg);
|
|
-ms-transform: rotate(360deg);
|
|
-o-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spinner {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
-moz-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
-moz-transform: rotate(360deg);
|
|
-ms-transform: rotate(360deg);
|
|
-o-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
* Preloader Two
|
|
*--------------------------------------------------------------
|
|
*/
|
|
|
|
.smart-loader-two {
|
|
position: relative;
|
|
width: 80px;
|
|
height: 80px;
|
|
-webkit-animation: spinner 5s infinite linear;
|
|
animation: spinner 5s infinite linear;
|
|
}
|
|
|
|
.smart-loader-two span {
|
|
width: 40px;
|
|
height: 40px;
|
|
position: absolute;
|
|
background: red;
|
|
display: block;
|
|
-webkit-animation: spinner-two 1s infinite linear;
|
|
animation: spinner-two 1s infinite linear;
|
|
}
|
|
|
|
.smart-loader-two span:nth-child(1) {
|
|
background: #2ecc71;
|
|
}
|
|
|
|
.smart-loader-two span:nth-child(2) {
|
|
left: 44px;
|
|
background: #9b59b6;
|
|
-webkit-animation-delay: .2s;
|
|
animation-delay: .2s;
|
|
}
|
|
|
|
.smart-loader-two span:nth-child(3) {
|
|
top: 44px;
|
|
background: #3498db;
|
|
-webkit-animation-delay: .4s;
|
|
animation-delay: .4s;
|
|
}
|
|
|
|
.smart-loader-two span:nth-child(4) {
|
|
top: 44px;
|
|
left: 44px;
|
|
background: #f1c40f;
|
|
-webkit-animation-delay: .6s;
|
|
animation-delay: .6s;
|
|
}
|
|
|
|
@-webkit-keyframes spinner-two {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(0.5);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes spinner-two {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(0.5);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
* Preloader Three
|
|
*--------------------------------------------------------------
|
|
*/
|
|
|
|
.smart-loader-three {
|
|
position: relative;
|
|
}
|
|
|
|
.smart-loader-three span {
|
|
display: block;
|
|
bottom: 0px;
|
|
width: 9px;
|
|
height: 5px;
|
|
background: #9b59b6;
|
|
position: absolute;
|
|
-webkit-animation: spinner-three 1.5s infinite ease-in-out;
|
|
animation: spinner-three 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.smart-loader-three span:nth-child(2) {
|
|
left: 11px;
|
|
-webkit-animation-delay: .2s;
|
|
animation-delay: .2s;
|
|
}
|
|
|
|
.smart-loader-three span:nth-child(3) {
|
|
left: 22px;
|
|
-webkit-animation-delay: .4s;
|
|
animation-delay: .4s;
|
|
}
|
|
|
|
.smart-loader-three span:nth-child(4) {
|
|
left: 33px;
|
|
-webkit-animation-delay: .6s;
|
|
animation-delay: .6s;
|
|
}
|
|
|
|
.smart-loader-three span:nth-child(5) {
|
|
left: 44px;
|
|
-webkit-animation-delay: .8s;
|
|
animation-delay: .8s;
|
|
}
|
|
|
|
@-webkit-keyframes spinner-three {
|
|
0% {
|
|
height: 5px;
|
|
transform: translateY(0px);
|
|
background: #9b59b6;
|
|
}
|
|
25% {
|
|
height: 30px;
|
|
transform: translateY(15px);
|
|
background: #3498db;
|
|
}
|
|
50% {
|
|
height: 5px;
|
|
transform: translateY(0px);
|
|
background: #9b59b6;
|
|
}
|
|
100% {
|
|
height: 5px;
|
|
transform: translateY(0px);
|
|
background: #9b59b6;
|
|
}
|
|
}
|
|
|
|
@keyframes spinner-three {
|
|
0% {
|
|
height: 5px;
|
|
transform: translateY(0px);
|
|
background: #9b59b6;
|
|
}
|
|
25% {
|
|
height: 30px;
|
|
transform: translateY(15px);
|
|
background: #3498db;
|
|
}
|
|
50% {
|
|
height: 5px;
|
|
transform: translateY(0px);
|
|
background: #9b59b6;
|
|
}
|
|
100% {
|
|
height: 5px;
|
|
transform: translateY(0px);
|
|
background: #9b59b6;
|
|
}
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
* Preloader Four
|
|
*--------------------------------------------------------------
|
|
*/
|
|
|
|
.smart-loader-four {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.smart-loader-four .spinner-cube {
|
|
width: 33%;
|
|
height: 33%;
|
|
background-color: #9b59b6;
|
|
float: left;
|
|
-webkit-animation: spinner-four 1.3s infinite ease-in-out;
|
|
animation: spinner-four 1.3s infinite ease-in-out;
|
|
}
|
|
|
|
.smart-loader-four .spinner-cube1 {
|
|
-webkit-animation-delay: 0.2s;
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.smart-loader-four .spinner-cube2 {
|
|
-webkit-animation-delay: 0.3s;
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.smart-loader-four .spinner-cube3 {
|
|
-webkit-animation-delay: 0.4s;
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.smart-loader-four .spinner-cube4 {
|
|
-webkit-animation-delay: 0.1s;
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.smart-loader-four .spinner-cube5 {
|
|
-webkit-animation-delay: 0.2s;
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.smart-loader-four .spinner-cube6 {
|
|
-webkit-animation-delay: 0.3s;
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.smart-loader-four .spinner-cube7 {
|
|
-webkit-animation-delay: 0s;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.smart-loader-four .spinner-cube8 {
|
|
-webkit-animation-delay: 0.1s;
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.smart-loader-four .spinner-cube9 {
|
|
-webkit-animation-delay: 0.2s;
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
@-webkit-keyframes spinner-four {
|
|
0%, 70%, 100% {
|
|
-webkit-transform: scale3D(1, 1, 1);
|
|
transform: scale3D(1, 1, 1);
|
|
}
|
|
35% {
|
|
-webkit-transform: scale3D(0, 0, 1);
|
|
transform: scale3D(0, 0, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes spinner-four {
|
|
0%, 70%, 100% {
|
|
-webkit-transform: scale3D(1, 1, 1);
|
|
transform: scale3D(1, 1, 1);
|
|
}
|
|
35% {
|
|
-webkit-transform: scale3D(0, 0, 1);
|
|
transform: scale3D(0, 0, 1);
|
|
}
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
* Preloader Five
|
|
*--------------------------------------------------------------
|
|
*/
|
|
|
|
.smart-loader-five {
|
|
width: 80px;
|
|
height: 80px;
|
|
position: relative;
|
|
}
|
|
|
|
.smart-loader-five .spinner-cube {
|
|
border: 2px solid transparent;
|
|
float: left;
|
|
width: 50%;
|
|
height: 50%;
|
|
position: relative;
|
|
-webkit-transform: scale(1.1);
|
|
-moz-transform: scale(1.1);
|
|
-ms-transform: scale(1.1);
|
|
-o-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-ms-box-sizing: border-box;
|
|
-o-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.smart-loader-five .spinner-cube:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #9b59b6;
|
|
-webkit-animation: spinner-five 2.4s infinite linear both;
|
|
animation: spinner-five 2.4s infinite linear both;
|
|
-webkit-transform-origin: 100% 100%;
|
|
-ms-transform-origin: 100% 100%;
|
|
transform-origin: 100% 100%;
|
|
}
|
|
|
|
.smart-loader-five .spinner-cube-2 {
|
|
-webkit-transform: scale(1.1) rotateZ(90deg);
|
|
transform: scale(1.1) rotateZ(90deg);
|
|
}
|
|
|
|
.smart-loader-five .spinner-cube-3 {
|
|
-webkit-transform: scale(1.1) rotateZ(180deg);
|
|
transform: scale(1.1) rotateZ(180deg);
|
|
}
|
|
|
|
.smart-loader-five .spinner-cube-4 {
|
|
-webkit-transform: scale(1.1) rotateZ(270deg);
|
|
transform: scale(1.1) rotateZ(270deg);
|
|
}
|
|
|
|
.smart-loader-five .spinner-cube-2:before {
|
|
-webkit-animation-delay: 0.3s;
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.smart-loader-five .spinner-cube-3:before {
|
|
-webkit-animation-delay: 0.6s;
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
.smart-loader-five .spinner-cube-4:before {
|
|
-webkit-animation-delay: 0.9s;
|
|
animation-delay: 0.9s;
|
|
}
|
|
|
|
@-webkit-keyframes spinner-five {
|
|
0%, 10% {
|
|
-webkit-transform: perspective(140px) rotateX(-180deg);
|
|
transform: perspective(140px) rotateX(-180deg);
|
|
opacity: 0;
|
|
}
|
|
25%, 75% {
|
|
-webkit-transform: perspective(140px) rotateX(0deg);
|
|
transform: perspective(140px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
90%, 100% {
|
|
-webkit-transform: perspective(140px) rotateY(180deg);
|
|
transform: perspective(140px) rotateY(180deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes spinner-five {
|
|
0%, 10% {
|
|
-webkit-transform: perspective(140px) rotateX(-180deg);
|
|
transform: perspective(140px) rotateX(-180deg);
|
|
opacity: 0;
|
|
}
|
|
25%, 75% {
|
|
-webkit-transform: perspective(140px) rotateX(0deg);
|
|
transform: perspective(140px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
90%, 100% {
|
|
-webkit-transform: perspective(140px) rotateY(180deg);
|
|
transform: perspective(140px) rotateY(180deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
* Preloader Six
|
|
*--------------------------------------------------------------
|
|
*/
|
|
|
|
.smart-loader-six {
|
|
width: 70px;
|
|
height: 70px;
|
|
position: relative;
|
|
}
|
|
|
|
.smart-loader-six .spinner-cube-1,
|
|
.smart-loader-six .spinner-cube-2 {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background-color: #3498db;
|
|
opacity: 0.6;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
-webkit-animation: spinner-six 2.0s infinite ease-in-out;
|
|
animation: spinner-six 2.0s infinite ease-in-out;
|
|
}
|
|
|
|
.smart-loader-six .spinner-cube-2 {
|
|
-webkit-animation-delay: -1.0s;
|
|
animation-delay: -1.0s;
|
|
}
|
|
|
|
@-webkit-keyframes spinner-six {
|
|
0%, 100% {
|
|
-webkit-transform: scale(0.0)
|
|
}
|
|
50% {
|
|
-webkit-transform: scale(1.0)
|
|
}
|
|
}
|
|
|
|
@keyframes spinner-six {
|
|
0%, 100% {
|
|
transform: scale(0.0);
|
|
-webkit-transform: scale(0.0);
|
|
}
|
|
50% {
|
|
transform: scale(1.0);
|
|
-webkit-transform: scale(1.0);
|
|
}
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
* Preloader Seven
|
|
*--------------------------------------------------------------
|
|
*/ |