vue实现一个表示实时，加载中的动画效果

前言：

       用css实现的一个表示实时效果的动画，

效果图展示：

实现代码：（用的ivew的card）

1.template:

<Card style="width:200px; margin:20px 10px 20px 10px;float:left; cursor:pointer;"
          v-for="device in allDevices ">
      <p slot="title" style='width:100px;height:40px;line-height:40px;'>
        {{device.name}}
      </p>
      <!--动起来的小线条-->
      <div slot='extra'>
        <div class="loader-inner line-scale-pulse-out-rapid"
             :class="{'success':device.status === 0,'fail':device.status === 1,'null':device.status === 2 }">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div>
        <ul>
          <li class="clearfix ip" v-for='(item,index) in device.attachment' :key="index">
            <div style='float:left;width:50%;' class='flowfix'>
              {{item.name}}:
            </div>
            <div style='float:right;width:50%;' class='flowfix'>
              {{item.value}}
            </div>
          </li>
        </ul>
      </div>
    </Card>

2.data里面定义数据

 allDevices:[
        {
          name:'1号机器',
          status:0,
          attachment:[
            {name:'1号',value:'1'},
            {name:'2号',value:'2'},
          ]
        },
        {
          name:'2号机器',
          status:1,
          attachment:[
            {name:'1号',value:'1'},
            {name:'2号',value:'2'},
          ]
        },
        {
          name:'3号机器',
          status:2,
          attachment:[
            {name:'1号',value:'1'},
            {name:'2号',value:'2'},
          ]
        },
      ],

3.css样式（很重要）

.line-scale-pulse-out-rapid.success > div {
    background-color: #4caf50;
  }

  .line-scale-pulse-out-rapid.null > div {
    background-color: #f44336;
  }

  .line-scale-pulse-out-rapid.fail > div {
    background-color: #ff9800;
  }
  .line-scale-pulse-out-rapid>div{
    width:4px;
    height:35px;
    display:inline-block;
    border-radius:2px;
    margin:2px;
    background-color:#fff;
    vertical-align:middle;
    -webkit-animation:line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78);
    animation:line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78)
  }
  .line-scale-pulse-out-rapid>div:nth-child(2),.line-scale-pulse-out-rapid>div:nth-child(4){
    -webkit-animation-delay:-.25s!important;
    animation-delay:-.25s!important
  }
  .line-scale-pulse-out-rapid>div:nth-child(1),.line-scale-pulse-out-rapid>div:nth-child(5){
    -webkit-animation-delay:0s!important;
    animation-delay:0s!important
  }
  @-webkit-keyframes line-scale-pulse-out-rapid{
    0%,90%{
      -webkit-transform:scaley(1);
      transform:scaley(1)
    }
    80%{
      -webkit-transform:scaley(.3);
      transform:scaley(.3)
    }
  }
  @keyframes line-scale-pulse-out-rapid{
    0%,90%{
      -webkit-transform:scaley(1);
      transform:scaley(1)
    }
    80%{-webkit-transform:scaley(.3);
      transform:scaley(.3)
    }
  }

把这三部分放到组件中，效果就可以展示了