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>
  • 相关阅读:
    依赖注入简单解释
    设计模式
    Git 命令使用
    手机版自适应
    自定义属性的添加
    innerText Textcontent浏览器兼容代码
    获取间的内容
    密码长度为6-10的判断
    模拟输入框
    排他功能
  • 原文地址:https://www.cnblogs.com/whblogs/p/13858360.html
Copyright © 2011-2022 走看看