.loader {
    display: block;
    height: 100%;
    width: 100%;
    background: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15000;    
}

.loader:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 5010;
    width: 62px;
    height: 62px;
    top: 50%;
    left: 50%;
    margin-left: -31px;
    margin-top: -31px;
    background: url(../images/loader01.png) center center no-repeat;
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
}

.loader:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 5009;
    width: 62px;
    height: 62px;
    top: 50%;
    left: 50%;
    margin-left: -31px;
    margin-top: -31px;
    background: url(../images/loader02.png) center center no-repeat;
    -webkit-animation:spin2 3s linear infinite;
    -moz-animation:spin2 3s linear infinite;
    animation:spin2 3s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@-moz-keyframes spin2 { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin2 { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin2 { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }