From f863e2b3e14af76bfc46c05b07b058ac04bf8ad8 Mon Sep 17 00:00:00 2001 From: hhCandy Date: Sun, 30 Dec 2018 14:30:34 +0800 Subject: [PATCH] initial comment --- greadLoading.css | 131 +++++++++++++++++++++++++++++++++++++++++++ greadLoading.min.css | 1 + 2 files changed, 132 insertions(+) create mode 100644 greadLoading.css create mode 100644 greadLoading.min.css diff --git a/greadLoading.css b/greadLoading.css new file mode 100644 index 0000000..fcf176b --- /dev/null +++ b/greadLoading.css @@ -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;} \ No newline at end of file diff --git a/greadLoading.min.css b/greadLoading.min.css new file mode 100644 index 0000000..ebee720 --- /dev/null +++ b/greadLoading.min.css @@ -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;} \ No newline at end of file