博主介绍

点击下列内容可跳转对应的界面，查看更多精彩内容！

主页：水香木鱼
专栏：后台管理系统

文章目录

简介：这是一篇有关【Vue实现网页首屏加载动画、页面内请求数据加载loading】的文章，博主用最精简的语言去表达给前端读者们。

使用范例：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="favicon.ico" />        <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></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">            <div class="d2-home__main">        <img          class="d2-home__loading"          src="./image/20180919030732834.gif"          alt="loading"        />      </div>    </div>      </body></html>

注意：“加载动画不可与请求数据的组件同时使用!” 否则会出现两个加载效果。

  • 在public/index中使用需要谨慎，因为这是全局加载的。
  • 建议使用loading组件

1、四圆点加载动画

压缩版样式文件：

#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}}

动画节点：

在id=“app” 标签内加入

<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、旋涡加载动画

压缩版样式文件：

  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;}

动画节点：

在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>V0.1</span>  </div></div>

3、电池状态加载动画

压缩版样式：

#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;}

动画节点：

在id=“app” 标签内加入

<div id="app-cockpit-loading">  <span></span>  <span></span>  <span></span>  <span></span>  <span></span></div>

4、请求数据缓慢实现loading提示【推荐】

更多加载图标请移步–网页动态加载（loading）GIF图标

Ⅰ、封装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" />
 
//获取列表数据getList() {  // 开始加载loading  let loading = this.$loading({    lock: true, //lock的修改符--默认是false    text: "拼命加载中，请稍候...", //显示在加载图标下方的加载文案    background: "rgba(0,0,0,0.8)", //遮罩层颜色    spinner: "el-icon-loading", //自定义加载图标类名  });  //请求接口  fetchList({    keywords: "水香木鱼",    pageIndex: this.pageIndex,    pageSize: this.pageSize,  })    .then((res) => {     this.listData = res.data;    //关闭loading    loading.close();    })  .catch((error) => {});},
5、齿轮加载gif效果

 压缩版样式：
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;}
动画节点：
在id=“app” 标签内加入
<div class="d2-home__main">  <img  class="d2-home__loading"  src="./image/20180919030732834.gif"  alt="loading"  /></div>
相关推荐
⭐Vue实现任意内容展开 / 收起功能组件
 ⭐Vue实现点击按钮或者图标可编辑输入框
 ⭐vue-生成二维码【生成、点击输入框内叉号移除生成的二维码、输入框聚焦】
 ⭐一文图解前端WebSocket 实时通信
 ⭐前端实现放大镜效果【原生js实现、vue实现】