/*-------------------------------------------------------------- * 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 *-------------------------------------------------------------- */