View source for Team:Central Calgary/loader.css

@charset "utf-8";

#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 #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;
}
ho
#loader-wrapper .loader-section.section-top {
    top: 0;
}
 
#loader-wrapper .loader-section.section-bot {
    bottom: 0;
}

#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; 
}

#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;
}
 
#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; 
}

#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;
		
    }
}