loading效果

<template>

  <div>

    <div class="loading"></div>

  </div>

</template>

<script>

  export default {

    props: {},

    data() {

      return {};

    },

    methods: {}

  };

</script>

<style lang="less" scoped>

  .loading {

    width: 50px;

    height: 50px;

    background: red;

    position: relative;

    animation: mymove 5s linear infinite;

    -webkit-animation: mymove 5s linear infinite; /*Safari and Chrome*/

  }

  @keyframes mymove {

    from {

      transform: rotate(0deg);

    }

    to {

      transform: rotate(360deg);

    }

  }

  @-webkit-keyframes mymove /*Safari and Chrome*/ {

    from {

      -webkit-transform: rotate(0deg);

    }

    to {

      -webkit-transform: rotate(360deg);

    }

  }

</style>