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