实现div旋转效果

<template>
  <el-dialog
    custom-class="loading-dlg"
    :show-close="false"
    :visible="selfLoading.show"
  >
    <div class="loading-main">
      <div class="icon">
        <svg-icon icon-class="iconLoadingStep-1" class-name="loading-step-1 pinwheel" />
        <svg-icon icon-class="iconLoadingStep-2" class-name="loading-step-2 pinwheel" />
      </div>
      <span class="loading-msg">
        {{ msg }}
      </span>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { isEmptySrt } from '@/utils'

export default {
  name: 'SelfLoading',
  computed: {
    ...mapGetters([
      'selfLoading'
    ]),
    msg() {
      return isEmptySrt(this.selfLoading.text) ? this.$t('common.waiting_txt') : this.selfLoading.text
    }
  }
}
</script>

<style lang="scss">
@import "~@/styles/font.scss";

  $iconSize: 96px;
  .loading-dlg {
    width: 30%;
    margin-top: 30vh !important;
    & .el-dialog__header {
      display: none;
    }
    & .loading-main {
      vertical-align: middle;
      & div {
        display: inline-block;
        vertical-align: middle;
      }
      .icon {
        height: $iconSize;
        width: $iconSize;
        .loading-step-1, .loading-step-2 {
          position: absolute;
          left: 52px;
          width: $iconSize;
          height: $iconSize;
        }
      }
      .loading-msg {
        @include font-l-32-36;
        height: $iconSize;
        vertical-align: middle;
      }
    }
  }

// 旋转效果
  .pinwheel {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
  }

  @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
  }
  @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
    to{-moz-transform: rotate(359deg)}
  }
  @-o-keyframes rotate{from{-o-transform: rotate(0deg)}
    to{-o-transform: rotate(359deg)}
  }
  @keyframes rotate{from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
  }
</style>