<template>
  <transition>
    <div class="ui-loading" :class="['ui-loading--' + size, 'ui-loading--' + type]" v-if="visible">
      <span class="ui-loading__icon"></span>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'UiLoading',
  props: {
    type: {
      type: String,
      default: 'default',
      validator(value) {
        return ['default', 'primary', 'success', 'warning', 'danger', 'info'].includes(value)
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'small',
      validator(value) {
        return ['small', 'mini', 'medium'].includes(value)
      }
    }
  }
}
</script>
<style lang="less">
.ui-loading{
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: .8;
  line-height: 1em;
  &.v-enter{
    opacity: 0;
  }
  &.v-enter-active{
    transition: all .3s;
  }
  &.v-enter-active{
    opacity: 0.8;
  }
  &.v-leave{
    opacity: 0.8;
  }
  &.v-leave-active{
    transition: all .3s;
  }
  &.v-leave-active{
    opacity: 0;
  }
}
.ui-loading--medium {
  .ui-loading__icon{
    width: 24px;
    height: 24px;
    border-width: 6px;
  }
}
.ui-loading--small {
  .ui-loading__icon{
    width: 20px;
    height: 20px;
    border-width: 3px;
  }
}
.ui-loading--mini {
  .ui-loading__icon{
    width: 14px;
    height: 14px;
    border-width: 2px;
  }
}
.ui-loading--default {
  .ui-loading__icon{
    border-color: #999;
  }
}
.ui-loading--primary {
  .ui-loading__icon{
    border-color: #5f9efa;
  }
}
.ui-loading--success {
  .ui-loading__icon{
    border-color: #7ebf4a;
  }
}
.ui-loading--info {
  .ui-loading__icon{
    border-color: #999;
  }
}
.ui-loading--warning {
  .ui-loading__icon{
    border-color: #dba54a;
  }
}
.ui-loading--danger {
  .ui-loading__icon{
    border-color: #e3756f;
  }
}
.ui-loading__icon{
  display: inline-block;
  border-style: solid;
  border-color: #999;
  border-radius: 50%;
  border-right-color: transparent!important;
  animation: rotating .7s linear infinite;
}
@keyframes rotating{
  0% {
      transform: rotate(0);
  }
  100% {
      transform: rotate(1turn);
  }
}
</style>
