/** * Custom Style for Preloader * * @package Articlewave */ #articlewave-preloader { background: #fff none repeat scroll 0 0; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 99999; } #articlewave-preloader .preloader-wrapper { left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /*-------------------------- Usage: Wave --------------------------*/ .articlewave-wave { margin: 40px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .articlewave-wave .aw-rect { background-color: #04a8d0; height: 100%; width: 6px; display: inline-block; -webkit-animation: articlewave-waveStretchDelay 1.2s infinite ease-in-out; animation: articlewave-waveStretchDelay 1.2s infinite ease-in-out; } .articlewave-wave .aw-rect1 { -webkit-animation-delay: -1.2s; animation-delay: -1.2s; } .articlewave-wave .aw-rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .articlewave-wave .aw-rect3 { -webkit-animation-delay: -1s; animation-delay: -1s; } .articlewave-wave .aw-rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .articlewave-wave .aw-rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes articlewave-waveStretchDelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes articlewave-waveStretchDelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1); transform: scaleY(1); } } /*-------------------------- Usage: Three Bounce --------------------------*/ .articlewave-three-bounce { margin: 40px auto; width: 80px; text-align: center; } .articlewave-three-bounce .aw-child { width: 20px; height: 20px; background-color: #E53935; border-radius: 100%; display: inline-block; -webkit-animation: articlewave-three-bounce 1.4s ease-in-out 0s infinite both; animation: articlewave-three-bounce 1.4s ease-in-out 0s infinite both; } .articlewave-three-bounce .aw-bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .articlewave-three-bounce .aw-bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes articlewave-three-bounce { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes articlewave-three-bounce { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } /*-------------------------------- Usage: Three Folding Cube --------------------------------*/ .articlewave-folding-cube { margin: 40px auto; width: 40px; height: 40px; position: relative; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .articlewave-folding-cube .aw-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .articlewave-folding-cube .aw-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #E53935; -webkit-animation: aw-foldCubeAngle 2.4s infinite linear both; animation: aw-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .articlewave-folding-cube .aw-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); } .articlewave-folding-cube .aw-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); } .articlewave-folding-cube .aw-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); } .articlewave-folding-cube .aw-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .articlewave-folding-cube .aw-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .articlewave-folding-cube .aw-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes aw-foldCubeAngle { 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 aw-foldCubeAngle { 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; } }