Vue實(shí)現(xiàn)網(wǎng)頁首屏加載動(dòng)畫及頁面內(nèi)請(qǐng)求數(shù)據(jù)加載loading效果
更新時(shí)間：2023年02月10日 14:18:40 作者：水香木魚
Loading加載動(dòng)畫組件看起來很簡(jiǎn)單不重要,實(shí)際上它是保證用戶留存的關(guān)鍵一環(huán),下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)網(wǎng)頁首屏加載動(dòng)畫及頁面內(nèi)請(qǐng)求數(shù)據(jù)加載loading效果的相關(guān)資料,需要的朋友可以參考下
簡(jiǎn)介：
這是一篇有關(guān)【Vue實(shí)現(xiàn)網(wǎng)頁首屏加載動(dòng)畫、頁面內(nèi)請(qǐng)求數(shù)據(jù)加載loading】的文章，用最精簡(jiǎn)的語言去表達(dá)給前端讀者們。
使用范例：
public/index.html【完整代碼】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" />
<!-- 加載動(dòng)畫 -->
<style>html,body,#app{width:100%;height:100%;}.d2-home{background-color:#303133;height:100%;display:flex;position:relative;}.d2-home__main{position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);}.d2-home__footer{width:100%;flex-grow:0;text-align:center;padding:1em 0;}.d2-home__loading{height:82px;width:82px;}</style>
<title><%= webpackConfig.name %></title>
</head>
<body>
<noscript>
<strong
>We're sorry but test doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong
>
</noscript>
<div id="app">
<!-- 動(dòng)畫節(jié)點(diǎn) -->
<div class="d2-home__main">
<img
class="d2-home__loading"
src="./image/20180919030732834.gif"
alt="loading"
/>
</div>
</div>
<!-- built files will be auto injected -->
</body>
</html>
注意：“加載動(dòng)畫不可與請(qǐng)求數(shù)據(jù)的組件同時(shí)使用!” 否則會(huì)出現(xiàn)兩個(gè)加載效果。
- 在public/index中使用需要謹(jǐn)慎，因?yàn)檫@是全局加載的。
- 建議使用loading組件
1、四圓點(diǎn)加載動(dòng)畫
壓縮版樣式文件：
<style>#loading-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#fff;user-select:none;z-index:9999;overflow:hidden}.loading-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}.loading-dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:64px;width:64px;height:64px;box-sizing:border-box}.loading-dot i{width:22px;height:22px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.loading-dot i:nth-child(1){top:0;left:0}.loading-dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.loading-dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.loading-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>
動(dòng)畫節(jié)點(diǎn)：
在id=“app” 標(biāo)簽內(nèi)加入
<!-- 動(dòng)畫節(jié)點(diǎn) -->
<div id="loading-mask">
<div class="loading-wrapper">
<span class="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span>
</div>
</div>
2、旋渦加載動(dòng)畫
壓縮版樣式文件：
<style>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;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:#1890ff;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;}</style>
動(dòng)畫節(jié)點(diǎn)：
在id=“app” 標(biāo)簽內(nèi)加入
<!-- 動(dòng)畫節(jié)點(diǎn) --> <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">正在加載,請(qǐng)耐心等待 <br> <span>V0.1</span> </div> </div>
3、電池狀態(tài)加載動(dòng)畫
壓縮版樣式：
<style media="screen" type="text/css">#app-cockpit-loading{width:120px;height:40px;position:absolute;font-size:50px;line-height:50px;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);}#app-cockpit-loading span{display:inline-block;width:8px;height:100%;border-radius:4px;background:#1890ff;-webkit-animation:load 1s ease infinite;}@-webkit-keyframes load{0%,100%{height:40px;background:#1890ff;}50%{height:70px;margin:-15px 0;background:lightblue;}}#app-cockpit-loading span:nth-child(2){-webkit-animation-delay:0.2s;}#app-cockpit-loading span:nth-child(3){-webkit-animation-delay:0.4s;}#app-cockpit-loading span:nth-child(4){-webkit-animation-delay:0.6s;}#app-cockpit-loading span:nth-child(5){-webkit-animation-delay:0.8s;}</style>
動(dòng)畫節(jié)點(diǎn)：
在id=“app” 標(biāo)簽內(nèi)加入
<!-- 動(dòng)畫節(jié)點(diǎn) --> <div id="app-cockpit-loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
4、請(qǐng)求數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示【推薦】
下載加載圖標(biāo)GIF圖標(biāo)
Ⅰ、封裝loading組件【推薦】
loading.vue
<template>
<div
class="loadingBox"
v-show="loading"
style="background-color: rgba(0, 0, 0, 0.5)"
>
<div class="sun-loading"></div>
</div>
</template>
<script>
export default {
name: "loading",
data() {
return {
loading: false,
};
},
created() {
var that = this;
this.bus.$on("loading", function (data) {
that.loading = !!data;
});
},
};
</script>
<style lang="less" scoped>
.sun-loading {
width: 45px;
height: 45px;
display: block;
animation: sunLoading 1s steps(12, end) infinite;
background: transparent
url("http://www.sucaijishi.com/uploadfile/2018/0919/20180919030731920.gif?imageMogr2/format/jpg/blur/1x0/quality/60");
background-size: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
根文件（App.vue）中使用：
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
<!--loading加載-->
<Loading></Loading>
<div style="height: 30px"></div>
</div>
</template>
<script>
import Loading from "./components/loading.vue";//引用loading組件
export default {
components: {
Loading,
},
};
</script>
main.js中全局注冊(cè)
Vue.prototype.bus = new Vue();
頁面使用：
//獲取列表數(shù)據(jù)
getList() {
// 顯示loading
this.bus.$emit("loading", true);
//請(qǐng)求接口
fetchList({
keywords: "水香木魚",
pageIndex: this.pageIndex,
pageSize: this.pageSize,
})
.then((res) => {
this.listData = res.data;
// 關(guān)閉loading
this.bus.$emit("loading", false);
})
.catch((error) => {});
},
Ⅱ、通過elementUI實(shí)現(xiàn)
//獲取列表數(shù)據(jù)
getList() {
// 開始加載loading
let loading = this.$loading({
lock: true, //lock的修改符--默認(rèn)是false
text: "拼命加載中，請(qǐng)稍候...", //顯示在加載圖標(biāo)下方的加載文案
background: "rgba(0,0,0,0.8)", //遮罩層顏色
spinner: "el-icon-loading", //自定義加載圖標(biāo)類名
});
//請(qǐng)求接口
fetchList({
keywords: "水香木魚",
pageIndex: this.pageIndex,
pageSize: this.pageSize,
})
.then((res) => {
this.listData = res.data;
//關(guān)閉loading
loading.close();
})
.catch((error) => {});
},
5、齒輪加載gif效果
壓縮版樣式：
<style>html,body,#app{width:100%;height:100%;}.d2-home{background-color:#303133;height:100%;display:flex;position:relative;}.d2-home__main{position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);}.d2-home__footer{width:100%;flex-grow:0;text-align:center;padding:1em 0;}.d2-home__loading{height:82px;width:82px;}</style>
動(dòng)畫節(jié)點(diǎn)：
在id=“app” 標(biāo)簽內(nèi)加入
<div class="d2-home__main"> <img class="d2-home__loading" src="./image/20180919030732834.gif" alt="loading" /> </div>
總結(jié)
到此這篇關(guān)于Vue實(shí)現(xiàn)網(wǎng)頁首屏加載動(dòng)畫及頁面內(nèi)請(qǐng)求數(shù)據(jù)加載loading效果的文章就介紹到這了,更多相關(guān)Vue網(wǎng)頁首屏加載動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue3中的provide、inject 的用法,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue引入靜態(tài)js文件的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
Vue?uni-app框架實(shí)現(xiàn)上拉加載下拉刷新功能
uni-app是一個(gè)使用Vue.js(opens?new?window)開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)2022-09-09
vue實(shí)現(xiàn)類似淘寶商品評(píng)價(jià)頁面星級(jí)評(píng)價(jià)及上傳多張圖片功能
最近在寫一個(gè)關(guān)于vue的商城項(xiàng)目，然后集成在移動(dòng)端中，開發(fā)需求中有一界面，類似淘寶商城評(píng)價(jià)界面！接下來通過本文給大家分享vue實(shí)現(xiàn)類似淘寶商品評(píng)價(jià)頁面星級(jí)評(píng)價(jià)及上傳多張圖片功能，需要的朋友參考下吧2018-10-10
下面小編就為大家分享一篇axios post提交formdata的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Element Timeline時(shí)間線的實(shí)現(xiàn)
本文主要介紹了Element Timeline時(shí)間線的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
今天小編就為大家分享一篇快速解決vue-cli在ie9+中無效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了使用Vant框架list組件遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解vue-cli之webpack3構(gòu)建全面提速優(yōu)化
這篇文章主要介紹了詳解vue-cli之webpack3構(gòu)建全面提速優(yōu)化，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
Vue初始化中的選項(xiàng)合并之initInternalComponent詳解
這篇文章主要介紹了Vue初始化中的選項(xiàng)合并之initInternalComponent的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06