Vue实现网页首屏加载动画及页面内请求数据加载loading效果

时间2024-02-11 03:59:02发布访客分类VUE浏览831

导读：收集整理的这篇文章主要介绍了Vue实现网页首屏加载动画及页面内请求数据加载loading效果，觉得挺不错的，现在分享给大家，也给大家做个参考。目录简介：使用范例：1、四圆点加载动画2、...

收集整理的这篇文章主要介绍了Vue实现网页首屏加载动画及页面内请求数据加载loading效果，觉得挺不错的，现在分享给大家，也给大家做个参考。

简介：

这是一篇有关【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="%= BASE_URL %>
    favicon.ico" rel="external nofollow"  />
        !-- 加载动画 -->
        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">
          !-- 动画节点 -->
          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>

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

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

1、四圆点加载动画

压缩版样式文件：

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>

动画节点：

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

压缩版样式文件：

  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>

动画节点：

在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、电池状态加载动画

压缩版样式：

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>

动画节点：

在id=“app” 标签内加入

!-- 动画节点 -->
    div id="app-cockpit-loading">
      span>
    /span>
      span>
    /span>
      span>
    /span>
      span>
    /span>
      span>
    /span>
    /div>

4、请求数据缓慢实现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?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中全局注册

Vue.prototype.bus = new Vue();

页面使用：

//获取列表数据getList() {
      // 显示loading  this.bus.$emit("loading", true);
  //请求接口  fetchList({
    keywords: "水香木鱼",    pageIndex: this.pageIndex,    pageSize: this.pageSize,  }
    )    .then((res) =>
 {
          this.listData = res.data;
          // 关闭loading      this.bus.$emit("loading", false);
    }
    )  .catch((error) =>
 {
}
    );
}
    ,

Ⅱ、通过elementUI实现

//获取列表数据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效果

压缩版样式：

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>

动画节点：

在id=“app” 标签内加入

div class="d2-home__main">
      img  class="d2-home__loading"  src="./image/20180919030732834.gif"  alt="loading"  />
    /div>

总结

到此这篇关于Vue实现网页首屏加载动画及页面内请求数据加载loading效果的文章就介绍到这了,更多相关Vue网页首屏加载动画内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

vue实现页面加载动画效果
vue初始化动画加载的实例

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

若转载请注明出处： Vue实现网页首屏加载动画及页面内请求数据加载loading效果
本文地址： https://pptw.com/jishu/609290.html

Vue使用distpicker插件实现省市级下拉框三级联动 Vuex unknown action type报错问题及解决