elementui loading circle

app.vue

<template>
    <div>
      <el-button
          size="small"
          type="primary"
          @click="exportOrderExcel"
      >
        批量导出
      </el-button>
      <loading-circle
        :visible.sync="exportDialogVisible"
        :loading.sync="exportDialogLoading"
        title="订单导出"
        loadingTxt="订单导出中..."
        loadingSuccessTxt="导出成功"
        loadingFailedTxt="导出失败"
      ></loading-circle>
    </div>
</template>

<script>
  import LoadingCircle from "@/components/LoadingCircle";

  export default {
    components: {
      LoadingCircle
    },
    data() {
      return {
        exportDialogLoading: 'loading',
        exportDialogVisible: false
      };
    },
    created() {

    },
    methods: {
      exportOrderExcel() {
        this.exportDialogVisible = true;

        exportOrder({}, {
          token: ''
        }).then(() => {
          this.exportDialogLoading = 'success';
        }).catch(() => {
          this.exportDialogLoading = 'failed';
        });

      }
    }
  };
</script>

LoadingCircle.vue

<template>
  <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="26%"
      @closed="handleExportDialogClose"
  >
    <div
        class="dialog-content"
        style="text-align: center"
    >
      <div
          class="circle-loader"
          :class="circleClass"
      >
        <div
            class="draw" :class="symbolClass"></div>
      </div>

      <p v-if="dialogStatus === 'loading'">
        {{loadingTxt}}
      </p>
      <p v-else-if="dialogStatus === 'success'">
        {{loadingSuccessTxt}}
      </p>
      <p v-else-if="dialogStatus === 'failed'">
        {{loadingFailedTxt}}
      </p>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'StatusCircle',
    props: {
      title:{
        type: String,
        default: '导出订单'
      },
      visible: {
        type: Boolean,
        default: false
      },
      loading: {
        type: String,
        default: 'loading'
      },
      loadingTxt: {
        type: String,
        default: '订单导出中...'
      },
      loadingSuccessTxt: {
        type: String,
        default: '导出成功'
      },
      loadingFailedTxt: {
        type: String,
        default: '导出失败'
      }
    },
    mounted(){
      this.dialogVisible = this.visible
      this.dialogStatus = this.loading
    },
    watch: {
      visible(val){
        this.dialogVisible = val
      },
      loading(val){
        this.dialogStatus = val
      },
    },
    computed:{
      circleClass(){
        if(this.dialogStatus === 'loading'){
          return ''
        }else if(this.dialogStatus === 'success'){
          return 'success load-complete'
        }else if(this.dialogStatus === 'failed'){
          return 'failed load-complete'
        }
      },
      symbolClass(){
        if(this.dialogStatus === 'success'){
          return 'checkmark'
        }else if(this.dialogStatus === 'failed'){
          return 'errormark'
        }
      }
    },
    data() {
      return {
        dialogVisible: null,
        dialogStatus: null
      }
    },
    methods: {
      handleExportDialogClose() {
        this.$emit('update:visible', false);
        this.$emit('update:loading', 'loading');
      },
    }
  }
</script>

main.scss

// Define vars we'll be using
$brand-success: $theme-color;
$loader-size: 60px;
$check-height: $loader-size/2;
$check-width: $check-height/2;
$check-left: ($loader-size/6 + $loader-size/12);
$check-thickness: 3px;
$check-color: $brand-success;

.circle-loader {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-left-color: $theme-color;
  animation: loader-spin 1.2s infinite linear;
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-radius: 50%;
  width: $loader-size;
  height: $loader-size;

  &.success {
    border-left-color: #67C23A;
  }

  &.failed {
    border-left-color: #F56C6C;
  }
}

.load-complete {
  -webkit-animation: none;
  animation: none;
  border-color: $check-color;
  transition: border 500ms ease-out;

  &.success {
    border-color: #67C23A;
  }

  &.failed {
    border-color: #F56C6C;
  }
}

.checkmark {
  display: block;

  &.draw:after {
    animation-duration: 800ms;
    animation-timing-function: ease;
    animation-name: checkmark;
    transform: scaleX(-1) rotate(135deg);
  }

  &:after {
    opacity: 1;
    height: $check-height;
    width: $check-width;
    transform-origin: left top;
    border-right: $check-thickness solid #67C23A;
    border-top: $check-thickness solid #67C23A;
    content: '';
    left: $check-left;
    top: $check-height;
    position: absolute;
  }
}

.errormark {
  display: block;

  width: 100%;
  height: 100%;
  position: relative;
  line-height: 0;
  font-size: 0;
  vertical-align: middle;
  transform: rotate(45deg);

  &:before{
    content:'';
    display:block;
    width: 34px;
    height: 0;
    background: #F56C6C;

    position: absolute;
    top: ($loader-size - 3px) / 2;
    left: ($loader-size - 34px) / 2;
  }


  &:after {
    content:'';
    display:block;
    width: 0;
    height:34px;
    background: #F56C6C;

    position: absolute;
    top: ($loader-size - 34px) / 2;
    left: ($loader-size - 3px) / 2;
  }

  &.draw:before {
    animation: errormarkbefore ease .4s;
    animation-fill-mode: forwards
  }

  &.draw:after{
    animation: errormarkafter ease .4s;
    animation-fill-mode: forwards;
    animation-delay: .4s;
  }
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: $check-width;
    opacity: 1;
  }
  40% {
    height: $check-height;
    width: $check-width;
    opacity: 1;
  }
  100% {
    height: $check-height;
    width: $check-width;
    opacity: 1;
  }
}

@keyframes errormarkbefore {
  0% {
    height: 3px;
    width: 0;
    opacity: 1;
  }
  100% {
    width: 34px;
    height: 3px;
    opacity: 1;
  }
}

@keyframes errormarkafter {
  0% {
    width: 3px;
    height:0;
    opacity: 1;
  }
  100% {
    width: 3px;
    height:34px;
    opacity: 1;
  }
}