Team:Central Calgary/loader.css

@charset "utf-8";

1. loader-wrapper{

   position: fixed;
   left:0;

top:0;

   width: 100%;
   height: 100%;
   z-index: 1000;

}

.loader-section {

position: fixed;

   left:0;
   width: 100%;
   height: 50.1%;
   background: #FFFFFF;
   z-index: 1000;
}

.loaded #loader-wrapper .loader-section.section-top {
   -webkit-transform: translateY(-100%);
   -ms-transform: translateY(-100%);
   transform: translateY(-100%);

-webkit-transition: all 1s 1s ease-out;

           transition: all 1s 1s ease-out;

}

.loaded #loader-wrapper .loader-section.section-bot {

   -webkit-transform: translateY(300%);
   -ms-transform: translateY(300%);
   transform: translateY(300%);

-webkit-transition: all 1s 1s ease-out;

           transition: all 1s 1s ease-out;

}

.loaded #loader {

   opacity: 0;

-webkit-transition: all 1s ease-out;

           transition: all 1s ease-out;

}

.loaded #loader1 {

   opacity: 0;

-webkit-transition: all 1s ease-out;

           transition: all 1s ease-out;

}

.loaded #loader-wrapper {

       -webkit-transform: translateY(-100%);
           -ms-transform: translateY(-100%);
               transform: translateY(-100%);

       -webkit-transition: all 1s 1.6s ease-out; 
               transition: all 1s 1.6s ease-out;

}

1. loader-wrapper .loader-section.section-top {

   top: 0;

}

1. loader-wrapper .loader-section.section-bot {

   bottom: 0;

}

1. loader {

display:block; position:fixed; left:50%; top:50%; width:150px; height:150px; margin: -75px 0 0 -75px; border:3px solid transparent; border-top-color:rgba(20,213,216,1.00); border-radius:50%;

   z-index: 1001;

-webkit-animation: anim 1.5s linear infinite;

   animation: anim 1.5s linear infinite; 

}

1. loader:before {

   content: "";
   position: absolute;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border-radius: 50%;
   border: 3px solid transparent;
   border-top-color: rgba(34,209,14,1.00);
   -webkit-animation: anim 3s linear infinite;
     animation: anim 3s linear infinite;

}

1. loader:after {

   content: "";
   position: absolute;
   top: 15px;
   left: 15px;
   right: 15px;
   bottom: 15px;
   border-radius: 50%;
   border: 3px solid transparent;
   border-top-color: rgba(199,51,208,1.00);
   -webkit-animation: anim 1.5s linear infinite; 
     animation: anim 1.5s linear infinite; 

}

1. loader1{

display:block; position:fixed; left:50%; top:50%; width:70px; height:70px; margin: -35px 0 0 -35px; border:3px solid rgba(249,0,4,1.00);

   z-index: 1001;

-webkit-animation: animR 3s linear infinite;

   animation: animR 3s linear infinite; 

}

h4 {

   color: #EEEEEE;

}

@-webkit-keyframes anim {

   0%   {
       -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
       -ms-transform: rotate(0deg);  /* IE 9 */
       transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */

   }
   100% {
       -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
       -ms-transform: rotate(360deg);  /* IE 9 */
       transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */

   }

} @keyframes anim {

   0%   {
       -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
       -ms-transform: rotate(0deg);  /* IE 9 */
       transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */

   }
   100% {
       -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
       -ms-transform: rotate(360deg);  /* IE 9 */
       transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
   }

}

@-webkit-keyframes animR {

   0%   {
       -webkit-transform: rotate(0deg); 
       -ms-transform: rotate(0deg); 
       transform: rotate(0deg); 

width:70px; height:70px; margin:-35px 0 0 -35px;

   }

50% { -webkit-transform: rotate(360deg);

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

width:0px; height:0px; margin:0 0 0 0; }

   100% {
        -webkit-transform: rotate(720deg); 
       -ms-transform: rotate(720deg); 
       transform: rotate(720deg); 

width:70px; height:70px; margin:-35px 0 0 -35;

   }

} @keyframes animR {

       0%   {
       -webkit-transform: rotate(0deg); 
       -ms-transform: rotate(0deg); 
       transform: rotate(0deg); 

width:70px; height:70px; margin:-35px 0 0 -35px;

   }

50% { -webkit-transform: rotate(360deg);

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

width:0px; height:0px; margin:0 0 0 0; }

   100% {
        -webkit-transform: rotate(720deg); 
       -ms-transform: rotate(720deg); 
       transform: rotate(720deg); 

width:70px; height:70px; margin:-35px 0 0 -35px;

   }

}