zoukankan      html  css  js  c++  java
  • 【loading】给iview添加加载动画

    <template>
      <div class="loading"  v-if="loading"  >
        <Spin class="img">
          <Icon type="ios-loading" class="demo-spin-icon-load"/>
          <div>正在拼命加载中...</div>
        </Spin>
      </div>
    </template>
    
    <script>
    export default {
      name: "loading",
      props: {
        loading: Object
      }
    }
    </script>
    
    <style scoped>
    .loading {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999;
    }
    .loading .img {
      display: block;
      width: 200px;
      height: 100px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      font-size: 14px;
    }
    /*加载中icon样式*/
    .demo-spin-icon-load {
      animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
      from {
        transform: rotate(0deg);
      }
      50% {
        transform: rotate(180deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    </style>
  • 相关阅读:
    单据存储过程
    C语言II博客作业04
    C语言II博客作业03
    C语言II博客作业02
    C语言II博客作业01
    学期总结
    C语言I博客作业09
    C语言I博客作业08
    C语言I博客作业07
    C语言I博客作业06
  • 原文地址:https://www.cnblogs.com/whblogs/p/13858360.html
Copyright © 2011-2022 走看看