Vue 两种首页加载等待动画,避免首次加载白屏时间过长
先看效果:
第一种:
第二种:
代码如下
注意:代码需要在index.html 中书写
第一种效果
<!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> html, body, #app { height: 100%; margin: 0px; padding: 0px; } .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: #7171C6; /* 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; } </style> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without Please enable it to continue.</strong> </noscript> <div id="app"> //在<div id="app"> 里面加入下列代码 <div id="loader-wrapper"> <div id="loader"></div> <div class="loader-section section-left"></div> <div class="loader-section section-right"></div> <div class="load_title">正在加载系统,请耐心等待 <br> <span>V1.3</span> </div> </div> </div> </body> </html>
第二种效果代码
<!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> .first-loading-wrp { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 90vh; min-height: 90vh; } .first-loading-wrp>h1 { font-size: 30px; font-weight: bolder; } .first-loading-wrp .loading-wrp { display: flex; align-items: center; justify-content: center; padding: 98px; } .dot { position: relative; box-sizing: border-box; display: inline-block; width: 64px; height: 64px; font-size: 64px; transform: rotate(45deg); animation: antRotate 1.2s infinite linear; } .dot i { position: absolute; display: block; width: 28px; height: 28px; background-color: #1890ff; border-radius: 100%; opacity: 0.3; transform: scale(0.75); transform-origin: 50% 50%; animation: antSpinMove 1s infinite linear alternate; } .dot i:nth-child(1) { top: 0; left: 0; } .dot i:nth-child(2) { top: 0; right: 0; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .dot i:nth-child(3) { right: 0; bottom: 0; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .dot i:nth-child(4) { bottom: 0; left: 0; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } @keyframes antRotate { to { -webkit-transform: rotate(405deg); transform: rotate(405deg); } } @-webkit-keyframes antRotate { to { -webkit-transform: rotate(405deg); transform: rotate(405deg); } } @keyframes antSpinMove { to { opacity: 1; } } @-webkit-keyframes antSpinMove { to { opacity: 1; } } </style> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"> //在<div id="app"> 里面加入下列代码 <div class="first-loading-wrp"> <div class="loading-wrp"> <span class="dot dot-spin"> <i></i> <i></i> <i></i> <i></i> </span> </div> <h2>努力加载中...</h2> </div> </body> </html>
成大事不在于力量的大小,而在于能坚持多久。