Loading 加载 loading 修改 loading动画

element  loading:

 

this.loadFun();

loadFun() {
      self = this;
      const loading = this.$loading({
        lock: true,
        text: "Loading...",
        spinner: "loadingImg"
      });

      setTimeout(() => {
        loading.close();
        self.loading = false;
      }, 2000);
    },





<style>
.el-loading-mask {
  background: url("../../assets/images/large/loadingbg.png") no-repeat center
    center !important;
  background-size: 100% 100%;
}

/* loading字体大小 */
.el-loading-spinner .el-loading-text {
  font-size: 0.8rem;
  color: white;
}

.loadingImg:before {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  content: "";
  background-size: 100% 100%;
  background-image: url("../../assets/images/large/loadicon.gif");
}
</style>

手写mask:

<div v-show="loading" class="mask">
      <div id="cssload-contain">
        <div class="cssload-wrap" id="cssload-wrap1">
          <div class="cssload-ball" id="cssload-ball1"></div>
        </div>

        <div class="cssload-wrap" id="cssload-wrap2">
          <div class="cssload-ball" id="cssload-ball2"></div>
        </div>

        <div class="cssload-wrap" id="cssload-wrap3">
          <div class="cssload-ball" id="cssload-ball3"></div>
        </div>

        <div class="cssload-wrap" id="cssload-wrap4">
          <div class="cssload-ball" id="cssload-ball4"></div>
        </div>
      </div>
    </div>




<style>
.mask {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/images/large/loadingbg.png") no-repeat center
    center !important;
  background-size: 100% 100%;
}
#cssload-contain {
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  animation: fadeIn 1.15s 1;
  -o-animation: fadeIn 1.15s 1;
  -ms-animation: fadeIn 1.15s 1;
  -webkit-animation: fadeIn 1.15s 1;
  -moz-animation: fadeIn 1.15s 1;
  animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
}

.cssload-wrap {
  animation: translate 1150ms infinite ease-in-out alternate,
    zindex 2300ms infinite ease-in-out;
  -o-animation: translate 1150ms infinite ease-in-out alternate,
    zindex 2300ms infinite ease-in-out;
  -ms-animation: translate 1150ms infinite ease-in-out alternate,
    zindex 2300ms infinite ease-in-out;
  -webkit-animation: translate 1150ms infinite ease-in-out alternate,
    zindex 2300ms infinite ease-in-out;
  -moz-animation: translate 1150ms infinite ease-in-out alternate,
    zindex 2300ms infinite ease-in-out;
  position: absolute;
}

.cssload-ball {
  width: 49px;
  height: 49px;
  box-shadow: 0 -6.25px 0 rgba(0, 0, 0, 0.15) inset;
  background-color: rgb(227, 116, 107);
  border-radius: 50%;
  animation: scale 1150ms infinite ease-in-out alternate;
  -o-animation: scale 1150ms infinite ease-in-out alternate;
  -ms-animation: scale 1150ms infinite ease-in-out alternate;
  -webkit-animation: scale 1150ms infinite ease-in-out alternate;
  -moz-animation: scale 1150ms infinite ease-in-out alternate;
  animation-delay: -575ms;
  -o-animation-delay: -575ms;
  -ms-animation-delay: -575ms;
  -webkit-animation-delay: -575ms;
  -moz-animation-delay: -575ms;
  transform: scale(0.5);
  -o-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  border: 2px solid black;
}

.cssload-ball:after {
  content: "";
  width: 49px;
  height: 13px;
  background: rgb(238, 238, 238);
  position: absolute;
  top: 68px;
  border-radius: 50%;
}

#cssload-wrap2 {
  animation-delay: -1150ms;
  -o-animation-delay: -1150ms;
  -ms-animation-delay: -1150ms;
  -webkit-animation-delay: -1150ms;
  -moz-animation-delay: -1150ms;
}

#cssload-ball2 {
  background-color: rgb(57, 123, 249);
  animation-delay: -1725ms;
  -o-animation-delay: -1725ms;
  -ms-animation-delay: -1725ms;
  -webkit-animation-delay: -1725ms;
  -moz-animation-delay: -1725ms;
}

#cssload-wrap3 {
  animation-delay: -1725ms;
  -o-animation-delay: -1725ms;
  -ms-animation-delay: -1725ms;
  -webkit-animation-delay: -1725ms;
  -moz-animation-delay: -1725ms;
}

#cssload-ball3 {
  background-color: rgb(244, 180, 0);
  animation-delay: -2300ms;
}

#cssload-wrap4 {
  animation-delay: -2875ms;
  -o-animation-delay: -2875ms;
  -ms-animation-delay: -2875ms;
  -webkit-animation-delay: -2875ms;
  -moz-animation-delay: -2875ms;
}

#cssload-ball4 {
  background-color: rgb(15, 157, 88);
  animation-delay: -3450ms;
  -o-animation-delay: -3450ms;
  -ms-animation-delay: -3450ms;
  -webkit-animation-delay: -3450ms;
  -moz-animation-delay: -3450ms;
}

@keyframes translate {
  100% {
    transform: translateX(97px);
  }
}

@-o-keyframes translate {
  100% {
    -o-transform: translateX(97px);
  }
}

@-ms-keyframes translate {
  100% {
    -ms-transform: translateX(97px);
  }
}

@-webkit-keyframes translate {
  100% {
    -webkit-transform: translateX(97px);
  }
}

@-moz-keyframes translate {
  100% {
    -moz-transform: translateX(97px);
  }
}

@keyframes scale {
  100% {
    transform: scale(1);
  }
}

@-o-keyframes scale {
  100% {
    -o-transform: scale(1);
  }
}

@-ms-keyframes scale {
  100% {
    -ms-transform: scale(1);
  }
}

@-webkit-keyframes scale {
  100% {
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes scale {
  100% {
    -moz-transform: scale(1);
  }
}

@keyframes zindex {
  25% {
    z-index: 1;
  }
  75% {
    z-index: -1;
  }
}

@-o-keyframes zindex {
  25% {
    z-index: 1;
  }
  75% {
    z-index: -1;
  }
}

@-ms-keyframes zindex {
  25% {
    z-index: 1;
  }
  75% {
    z-index: -1;
  }
}

@-webkit-keyframes zindex {
  25% {
    z-index: 1;
  }
  75% {
    z-index: -1;
  }
}

@-moz-keyframes zindex {
  25% {
    z-index: 1;
  }
  75% {
    z-index: -1;
  }
}

@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  100% {
    opacity: 1;
  }
}
</style>

完整代码:  

动画地址:

CSS Load.net - Miscellaneous loaders in pure CSS and HTML

<template>
  <div>
    <div v-show="loading" class="mask">
      <div id="cssload-contain">
        <div class="cssload-wrap" id="cssload-wrap1">
          <div class="cssload-ball" id="cssload-ball1"></div>
        </div>

        <div class="cssload-wrap" id="cssload-wrap2">
          <div class="cssload-ball" id="cssload-ball2"></div>
        </div>

        <div class="cssload-wrap" id="cssload-wrap3">
          <div class="cssload-ball" id="cssload-ball3"></div>
        </div>

        <div class="cssload-wrap" id="cssload-wrap4">
          <div class="cssload-ball" id="cssload-ball4"></div>
        </div>
      </div>
    </div>
    <div class="container" v-show="!loading">
      <div class="left-btn" @click="hiddenSide">
        <img src="../../assets/images/large/leftbtn.png" alt />
      </div>
      <div class="right-btn" @click="hiddenSide">
        <img src="../../assets/images/large/rightbtn.png" alt />
      </div>
      <div class="header">
        <div class="top">
          <Date />
        </div>
        <div class="sec_top">
          <div class="top-left">
            <img
              :class="showSide ? 'show' : 'hiddWidth0'"
              src="../../assets/images/large/qjdc.png"
              alt
            />
          </div>
          <div class="se_top">
            <div
              class="nav"
              v-for="(item, index) in navTab"
              :key="index"
              :class="{ tabactive: activeTab == index }"
              @click="changeaTb(index)"
            >
              <div>{
   
    
    { item }}</div>
            </div>
          </div>
          <div class="top-right" :class="showSide ? 'show' : 'hiddWidth0'">
            <img src="../../assets/images/large/qyhx.png" alt />
          </div>
          <div class="top-right-back">
            <a
              href="http://localhost/#/publish/74?token=fSsdCh09Y2A%2BIUl%2Bxuf6tw%3D%3D"
              target="_self"
            >
              <img src="../../assets/images/large/back_1.png" alt />
            </a>
          </div>
        </div>
      </div>

      <div class="content">
        <!-- <div v-if="!isShow" class="model" style="width: 13rem;
    height: 100%;
        position: relative;">-->

        <div class="left" :class="showSide ? 'show' : 'hiddWidth0'">
          <div style="margin-top: -0.625rem">
            <div class="sec-img">
              <img src="../../assets/images/large/zdxm.png" alt style="width:12.75rem" />
            </div>
          </div>
          <div class="prototal">
            <img src="../../assets/images/large/ptotal.png" alt />
            <div>
              <div class="title">项目总数</div>
              <div class="tnum">
                <countTo :startVal="0" :endVal="1098" :duration="3000" separator></countTo>
              </div>
            </div>
            <div>
              <div class="title">项目总投资额</div>
              <div class="num">
                <span>
                  <countTo :startVal="0" :endVal="457.12" :duration="3000" :decimals="2" separator></countTo>
                </span>
                <span class="unit">亿元</span>
              </div>
            </div>
            <div>
              <div class="title">累计到位投资</div>
              <div class="num">
                <span>
                  <countTo :startVal="0" :endVal="347.92" :duration="3000" :decimals="2"></countTo>
                </span>
                <span class="unit">亿元</span>
              </div>
            </div>
          </div>
          <chart-view
            style="height: 2.25rem; width: 12rem"
            :chart-option="barOptions"
            :auto-resize="true"
            height="100%"
          ></chart-view>
          <div class="sbjd">
            <div class="sbshow" v-for="(item, index) in sjlist" :key="index">
              <img :src="item.img" alt />
              <div style="margin-left: 0.125rem">
                <div class="title">{
   
    
    { item.name }}</div>
                <div class="num">
                  <countTo
                    :startVal="0"
                    :endVal="item.num"
                    :duration="3000"
                    :style="{ color: item.color }"
                  ></countTo>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="sec-img">
              <img src="../../assets/images/large/cyfz.jpg" alt style="height: 0.875rem;" />
            </div>
          </div>
          <div>
            <div class="showBusiness">
              <img src="../../assets/images/large/zdcyicon.png" alt />
              <span>主导产业一总数</span>
              <countTo class="cy1" :startVal="0" :endVal="1403" :duration="3000" separator></countTo>
              <span>主导产业二总数</span>
              <countTo class="cy2" :startVal="0" :endVal="2303" :duration="3000" separator></countTo>
            </div>
            <chart-view
              style="height: 4.5rem; width: 11rem"
              :chart-option="chartOpt2"
              :auto-resize="true"
              height="100%"
              ref="lineCharts"
            ></chart-view>

            <!-- <div id="line" style="height: 4.5rem; width: 11rem" ref="lines"></div> -->
          </div>
          <div class="sec-titleImg" style="margin-left: 0.875rem">
            <img src="../../assets/images/large/cyfz2.png" alt />
          </div>
          <div class="sec-img">
            <img src="../../assets/images/large/business.png" alt />
          </div>