Template:Edinburgh UG/preloader

1. loading{

   background-color: #e74c3c;
   height: 100%;
   width: 100%;
   position: fixed;
   z-index: 1000;
   margin-top: 0px;
   top: 0px;

}

1. loading-center{

   width: 100%;
   height: 100%;
   position: relative;
   }

1. loading-center-absolute {

   position: absolute;
   left: 50%;
   top: 50%;
   height: 60px;
   width: 60px;
   margin-top: -30px;
   margin-left: -30px;
   -webkit-animation: loading-center-absolute 1s infinite;
   animation: loading-center-absolute 1s infinite;

} .object{

   width: 20px;
   height: 20px;
   background-color: #FFF;
   float: left;
   -moz-border-radius: 50% 50% 50% 50%;
   -webkit-border-radius: 50% 50% 50% 50%;
   border-radius: 50% 50% 50% 50%;
   margin-right: 20px;
   margin-bottom: 20px;    

} .object:nth-child(2n+0) {

   margin-right: 0px;

}

1. object_one{

   -webkit-animation: object_one 1s infinite;
   animation: object_one 1s infinite;
   }

1. object_two{

   -webkit-animation: object_two 1s infinite;
   animation: object_two 1s infinite;
   }   

1. object_three{

   -webkit-animation: object_three 1s infinite;
   animation: object_three 1s infinite;
   }       

1. object_four{

   -webkit-animation: object_four 1s infinite;
   animation: object_four 1s infinite;
   }       
   

@-webkit-keyframes loading-center-absolute{ 100% {

   -ms-transform: rotate(360deg); 
   -webkit-transform: rotate(360deg); 
   transform: rotate(360deg); 
   }           
   

} @keyframes loading-center-absolute{ 100% {

   -ms-transform: rotate(360deg); 
   -webkit-transform: rotate(360deg); 
   transform: rotate(360deg); 
   }

}

@-webkit-keyframes object_one{ 50% {

   -ms-transform: translate(20px,20px); 
   -webkit-transform: translate(20px,20px);
   transform: translate(20px,20px);
   }

} @keyframes object_one{ 50% {

    -ms-transform: translate(20px,20px); 
   -webkit-transform: translate(20px,20px);
   transform: translate(20px,20px);
   }

}

@-webkit-keyframes object_two{ 50% {

   -ms-transform: translate(-20px,20px); 
   -webkit-transform: translate(-20px,20px);
   transform: translate(-20px,20px);
   }

} @keyframes object_two{ 50% {

   -ms-transform: translate(-20px,20px); 
   -webkit-transform: translate(-20px,20px);
   transform: translate(-20px,20px);
   }

}

@-webkit-keyframes object_three{ 50% {

   -ms-transform: translate(20px,-20px); 
   -webkit-transform: translate(20px,-20px);
   transform: translate(20px,-20px);
   }

} @keyframes object_three{ 50% {

   -ms-transform: translate(20px,-20px); 
   -webkit-transform: translate(20px,-20px);
   transform: translate(20px,-20px);
   }

}

@-webkit-keyframes object_four{ 50% {

   -ms-transform: translate(-20px,-20px); 
   -webkit-transform: translate(-20px,-20px);
   transform: translate(-20px,-20px);
   }

} @keyframes object_four{ 50% {

   -ms-transform: translate(-20px,-20px); 
   -webkit-transform: translate(-20px,-20px);
   transform: translate(-20px,-20px);
   }

}