parent
bebb009030
commit
f863e2b3e1
2 changed files with 132 additions and 0 deletions
@ -0,0 +1,131 @@ |
|||||||
|
.chromeframe { |
||||||
|
margin: 0.2em 0; |
||||||
|
background: #ccc; |
||||||
|
color: #000; |
||||||
|
padding: 0.2em 0;} |
||||||
|
#loader-wrapper { |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
z-index:999999;} |
||||||
|
#loader { |
||||||
|
display: block; |
||||||
|
position: relative; |
||||||
|
left: 50%; |
||||||
|
top: 50%; |
||||||
|
width: 150px; |
||||||
|
height: 150px; |
||||||
|
margin: -75px 0 0 -75px; |
||||||
|
border-radius: 50%; |
||||||
|
border: 3px solid transparent; |
||||||
|
/* COLOR 1 */ |
||||||
|
border-top-color: #FFF; |
||||||
|
-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ |
||||||
|
-ms-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ |
||||||
|
-moz-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ |
||||||
|
-o-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ |
||||||
|
animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ |
||||||
|
z-index:1001;} |
||||||
|
#loader:before { |
||||||
|
content: ""; |
||||||
|
position: absolute; |
||||||
|
top: 5px; |
||||||
|
left: 5px; |
||||||
|
right: 5px; |
||||||
|
bottom: 5px; |
||||||
|
border-radius: 50%; |
||||||
|
border: 3px solid transparent; |
||||||
|
/* COLOR 2 */ |
||||||
|
border-top-color: #FFF; |
||||||
|
-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ |
||||||
|
-moz-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ |
||||||
|
-o-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ |
||||||
|
-ms-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ |
||||||
|
animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */} |
||||||
|
#loader:after { |
||||||
|
content: ""; |
||||||
|
position: absolute; |
||||||
|
top: 15px; |
||||||
|
left: 15px; |
||||||
|
right: 15px; |
||||||
|
bottom: 15px; |
||||||
|
border-radius: 50%; |
||||||
|
border: 3px solid transparent; |
||||||
|
border-top-color: #FFF; |
||||||
|
/* COLOR 3 */ |
||||||
|
-moz-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ |
||||||
|
-o-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ |
||||||
|
-ms-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ |
||||||
|
-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ |
||||||
|
animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */} |
||||||
|
|
||||||
|
|
||||||
|
@-webkit-keyframes spin { |
||||||
|
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 spin { |
||||||
|
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 */} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
#loader-wrapper .loader-section { |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
width: 51%; |
||||||
|
height: 100%; |
||||||
|
background: #1abc9c; /* Old browsers */ |
||||||
|
z-index: 1000; |
||||||
|
-webkit-transform: translateX(0); /* Chrome, Opera 15+, Safari 3.1+ */ |
||||||
|
-ms-transform: translateX(0); /* IE 9 */ |
||||||
|
transform: translateX(0); /* Firefox 16+, IE 10+, Opera */} |
||||||
|
#loader-wrapper .loader-section.section-left {left: 0;} |
||||||
|
#loader-wrapper .loader-section.section-right {right: 0;} |
||||||
|
|
||||||
|
/* Loaded */ |
||||||
|
.loaded #loader-wrapper .loader-section.section-left { |
||||||
|
-webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ |
||||||
|
-ms-transform: translateX(-100%); /* IE 9 */ |
||||||
|
transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */ |
||||||
|
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
||||||
|
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);} |
||||||
|
.loaded #loader-wrapper .loader-section.section-right { |
||||||
|
-webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */ |
||||||
|
-ms-transform: translateX(100%); /* IE 9 */ |
||||||
|
transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */ |
||||||
|
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); |
||||||
|
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);} |
||||||
|
.loaded #loader { |
||||||
|
opacity: 0; |
||||||
|
-webkit-transition: all 0.3s ease-out; |
||||||
|
transition: all 0.3s ease-out;} |
||||||
|
.loaded #loader-wrapper { |
||||||
|
visibility: hidden; |
||||||
|
-webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ |
||||||
|
-ms-transform: translateY(-100%); /* IE 9 */ |
||||||
|
transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */ |
||||||
|
-webkit-transition: all 0.3s 1s ease-out; |
||||||
|
transition: all 0.3s 1s ease-out;} |
||||||
|
/* JavaScript Turned Off */ |
||||||
|
.no-js #loader-wrapper {display: none;} |
||||||
|
.no-js h1 {color: #222222;} |
||||||
|
#loader-wrapper .load_title { |
||||||
|
font-family:'Open Sans'; |
||||||
|
color:#FFF; font-size:19px; width:100%; text-align:center; z-index:9999999999999; position:absolute; top:60%; opacity:1; line-height:30px; } |
||||||
|
#loader-wrapper .load_title span { font-weight:normal; font-style:italic; font-size:13px; color:#FFF; opacity:0.5;} |
@ -0,0 +1 @@ |
|||||||
|
.chromeframe{margin:0.2em 0;background:#ccc;color:#000;padding:0.2em 0;}#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;}#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#FFF;-webkit-animation:spin 2s linear infinite;-ms-animation:spin 2s linear infinite;-moz-animation:spin 2s linear infinite;-o-animation:spin 2s linear infinite;animation:spin 2s linear infinite;z-index:1001;}#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#FFF;-webkit-animation:spin 3s linear infinite;-moz-animation:spin 3s linear infinite;-o-animation:spin 3s linear infinite;-ms-animation:spin 3s linear infinite;animation:spin 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:#FFF;-moz-animation:spin 1.5s linear infinite;-o-animation:spin 1.5s linear infinite;-ms-animation:spin 1.5s linear infinite;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite;}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}#loader-wrapper .loader-section{position:fixed;top:0;width:51%;height:100%;background:#1abc9c;z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}#loader-wrapper .loader-section.section-left{left:0;}#loader-wrapper .loader-section.section-right{right:0;}.loaded #loader-wrapper .loader-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);}.loaded #loader-wrapper .loader-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);}.loaded #loader{opacity:0;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}.loaded #loader-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all 0.3s 1s ease-out;transition:all 0.3s 1s ease-out;}.no-js #loader-wrapper{display:none;}.no-js h1{color:#222222;}#loader-wrapper .load_title{font-family:'Open Sans';color:#FFF;font-size:19px;width:100%;text-align:center;z-index:9999999999999;position:absolute;top:60%;opacity:1;line-height:30px;}#loader-wrapper .load_title span{font-weight:normal;font-style:italic;font-size:13px;color:#FFF;opacity:0.5;} |
Loading…
Reference in new issue