diff --git a/config/webpack.common.ts b/config/webpack.common.ts index 5de9cf7a0..b361713f4 100644 --- a/config/webpack.common.ts +++ b/config/webpack.common.ts @@ -117,6 +117,10 @@ const config: webpack.Configuration = { }), new AddAssetHtmlPlugin( [ + { + filepath: "./src/loading.css", + typeOfAsset: "css", + }, { filepath: "./node_modules/normalize.css/normalize.css", typeOfAsset: "css", diff --git a/src/index.html b/src/index.html index 9dfdf030c..dbed73508 100644 --- a/src/index.html +++ b/src/index.html @@ -11,7 +11,16 @@ -
晨丰WebCAD,全屋定制设计拆单,无需安装,云端设计,一键直达!
正在载入,请稍候...
+
+
+
+
+
晨丰WebCAD,全屋定制设计拆单,无需安装,云端设计,一键直达!
+
正在加载中,请稍候...
+
+ diff --git a/src/index.tsx b/src/index.tsx index 06d2a4b81..8f6e934c3 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -117,7 +117,7 @@ window.addEventListener("blur", e => window.onload = function () { - let el = document.getElementById("page_loading"); + let el = document.getElementById("loader-wrapper"); el.remove(); function isWebGLAvailable() { diff --git a/src/loading.css b/src/loading.css new file mode 100644 index 000000000..636c42b93 --- /dev/null +++ b/src/loading.css @@ -0,0 +1,171 @@ +.chromeframe { + margin: .2em 0; + background: #ccc; + color: #000; + padding: .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: #5C7080;/*背景色 原#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 .1s .3s cubic-bezier(0.645,0.045,0.355,1.000); + transition: all .1s .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 .1s .3s cubic-bezier(0.645,0.045,0.355,1.000); + transition: all .1s .3s cubic-bezier(0.645,0.045,0.355,1.000) +} + +.loaded #loader { + opacity: 0; + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out +} + +.loaded #loader-wrapper { + visibility: hidden; +} + +.no-js #loader-wrapper { + display: none +} + +.no-js h1 { + color: #222 +} + +#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: .5 +}