VUE首次加載加上Loading動畫

VUE運行速度快,但是首次加載白屏時間太長,用戶體驗不好,特意加上加載提示動畫

直接在index.html上加,有二個重點提示

1.CSS Style必須放在APP導入前,否則沒作用

2.在APP的Created()需要加一段將此物件取消

document.body.removeChild(loading);

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>見縫插針EOS</title>

<style type="text/css">

#Loading { top:50%; left:50%; position: absolute; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); z-index:100; }

@-webkit-keyframes ball-beat { 50% { opacity: 0.2; -webkit-transform: scale(0.75); transform: scale(0.75); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } }

@keyframes ball-beat { 50% { opacity: 0.2; -webkit-transform: scale(0.75); transform: scale(0.75); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } }

.ball-beat > div { background-color: #279fcf; width: 15px; height: 15px; border-radius: 100% !important; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; display: inline-block; -webkit-animation: ball-beat 0.7s 0s infinite linear; animation: ball-beat 0.7s 0s infinite linear; }

.ball-beat > div:nth-child(2n-1) { -webkit-animation-delay: 0.35s !important; animation-delay: 0.35s !important; }

</style>

</head>

<body style="margin: 0">

<div id="Loading"> <div class="loader-inner ball-beat">

<div></div> <div></div> <div></div>

</div>

</div>

<div id="app"></div>

</body> <meta name="viewport" content="user-scalable=no" />

</html>


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容