<template>
  <div class="sv-loading">
    <div class="sv-loading-icon"></div>
    <div class="sv-loading-text" v-if="text">{{text}}</div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'svLoading',
    data () {
      return {
        text: ''
      }
    },
    methods: {
      close () {
        window.setTimeout(() => {
          this.$el.remove()
        }, 200)
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";
 .sv-loading{
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index:9999;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: pxToRem(16 20);
   border-radius: pxToRem(10);
   background: rgba(0, 0, 0, .6);
   color: #f2f2f2;
   font-size: pxToRem(32);
   @keyframes fade-in {
     from{
       opacity: 0;
     }
     to {
       opacity: 1;
     }
   }
   @keyframes fade-out {
     to{
       opacity: 0;
     }
     from {
       opacity: 1;
     }
   }
   @keyframes rotate {
     from {
       transform: rotate(0deg);
     }
     to {
       transform: rotate(360deg);
     }
   }
   animation: fade-out .5s;
   &.is-active{
     animation: fade-in .5s;
   }
   .sv-loading-icon{
     width: pxToRem(50);
     height: pxToRem(50);
     border-radius: 50%;
     border: pxToRem(4) solid #ccc;
     border-left-color: $color-light;
     animation: rotate .5s linear infinite;
   }
   .sv-loading-text{
   }
 }
</style>
