import './loading.css' let Loading = {}// 避免重復install，設立flagLoading.installed = falseLoading.install = function (Vue) { if (Loading.installed) return Vue.prototype.$loading = {} Vue.prototype.$loading.show = () => { // 如果頁面有loading則不繼續執行 if (document.querySelector('#vue-loading')) return // 1、創建構造器，定義loading模板 let LoadingTip = Vue.extend({  template: `<div id="vue-loading">     <div class="loader"></div>     </div>` }) // 2、創建實例，掛載到文檔以后的地方 let tpl = new LoadingTip().$mount().$el // 3、把創建的實例添加到body中 document.body.appendChild(tpl) // 阻止遮罩滑動 document.querySelector('#vue-loading').addEventListener('touchmove', function (e) {  e.stopPropagation()  e.preventDefault() }) Loading.installed = true } Vue.prototype.$loading.hide = () => { let tpl = document.querySelector('#vue-loading') document.body.removeChild(tpl) }}export default Loading

#vue-loading { width: 100%; height: 100%; position: absolute; left: 0; top: 0}.loader { position: relative; width: 2.5em; height: 2.5em; transform: rotate(165deg);}.loader:before, .loader:after { content: ''; position: absolute; top: 50%; left: 50%; display: block; width: 0.5em; height: 0.5em; border-radius: 0.25em; transform: translate(-50%, -50%);}.loader:before { animation: before 2s infinite;}.loader:after { animation: after 2s infinite;}@keyframes before { 0% { width: 0.5em; box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75); } 35% { width: 2.5em; box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75); } 70% { width: 0.5em; box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75); } 100% { box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75); }}@keyframes after { 0% { height: 0.5em; box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75); } 35% { height: 2.5em; box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75); } 70% { height: 0.5em; box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75); } 100% { box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75); }}/** * Attempt to center the whole thing! */html,body { height: 100%;}.loader { position: absolute; top: calc(50% - 1.25em); left: calc(50% - 1.25em);}