/****************************** - SPINNER - ********************************/ #site_loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } /****************************** - LOADER FORMS - ********************************/ .loader { top:50%; left:50%; z-index:10000; position:absolute; } .loader.spinner0 { width: 40px; height: 40px; background: #ffffff url("loader.gif") no-repeat scroll center center; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); margin-top:-20px; margin-left:-20px; -webkit-animation: ld-rotateplaneEffect 1.2s infinite ease-in-out; animation: ld-rotateplaneEffect 1.2s infinite ease-in-out; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .loader.spinner1 { width: 40px; height: 40px; background-color: #fff; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); margin-top:-20px; margin-left:-20px; -webkit-animation: ld-rotateplaneEffect 1.2s infinite ease-in-out; animation: ld-rotateplaneEffect 1.2s infinite ease-in-out; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .loader.spinner5 { background:url(loader.gif) no-repeat 10px 10px; background-color:#fff; margin:-22px -22px; width:44px;height:44px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } @-webkit-keyframes ld-rotateplaneEffect { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes ld-rotateplaneEffect { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg);} 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);} 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);} } .loader.spinner2 { width: 40px; height: 40px; margin-top:-20px; margin-left:-20px; background-color: #ffffff; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); border-radius: 100%; -webkit-animation: ld-scaleoutEffect 1.0s infinite ease-in-out; animation: ld-scaleoutEffect 1.0s infinite ease-in-out; } @-webkit-keyframes ld-scaleoutEffect { 0% { -webkit-transform: scale(0.0) } 100% {-webkit-transform: scale(1.0); opacity: 0;} } @keyframes ld-scaleoutEffect { 0% {transform: scale(0.0);-webkit-transform: scale(0.0);} 100% {transform: scale(1.0);-webkit-transform: scale(1.0);opacity: 0;} } .loader.spinner3 { margin: -9px 0px 0px -35px; width: 70px; text-align: center; } .loader.spinner3 .bounce1, .loader.spinner3 .bounce2, .loader.spinner3 .bounce3 { width: 18px; height: 18px; background-color: #fff; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); border-radius: 100%; display: inline-block; -webkit-animation: ld-bouncedelayEffect 1.4s infinite ease-in-out; animation: ld-bouncedelayEffect 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .loader.spinner3 .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .loader.spinner3 .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes ld-bouncedelayEffect { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes ld-bouncedelayEffect { 0%, 80%, 100% {transform: scale(0.0);} 40% {transform: scale(1.0);} } .loader.spinner4 { margin: -20px 0px 0px -20px; width: 40px; height: 40px; text-align: center; -webkit-animation: ld-rotateEffect 2.0s infinite linear; animation: ld-rotateEffect 2.0s infinite linear; } .loader.spinner4 .dot1, .loader.spinner4 .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #fff; border-radius: 100%; -webkit-animation: ld-bounceEffect 2.0s infinite ease-in-out; animation: ld-bounceEffect 2.0s infinite ease-in-out; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); } .loader.spinner4 .dot2 { top: auto; bottom: 0px; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes ld-rotateEffect { 100% { -webkit-transform: rotate(360deg) }} @keyframes ld-rotateEffect { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} @-webkit-keyframes ld-bounceEffect { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes ld-bounceEffect { 0%, 100% {transform: scale(0.0);} 50% { transform: scale(1.0);} }