<template>
  <div class="monitor-loader" :style="`background:${bgColor}`">
    <div class="loader">
      <div class="outer"/>
      <div class="inner"/>
      <b class="msg">{{msg}}</b>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MonitorLoader',
  props: {
    msg: {
      type: String,
      default: '加载中 . . .',
    },
    bgColor: {
      type: String,
      default: 'rgba(0,0,0,0.3)',
    },
  }
}
</script>

<style lang="stylus" scoped>
.monitor-loader
  position fixed
  top 0
  left 0
  bottom 0
  right 0
  z-index 9999
  display flex
  align-items center
  justify-content center
  .loader
    position relative
    z-index 8888
    .msg
      display block
      color #fff
      margin-top 150%
    >div
      border: 0.04rem solid transparent
      border-top-color $color-blue
      border-bottom-color $color-blue
      border-radius 50%
      position absolute
      top 50%
      left 50%
      &.outer
        width .5rem
        height .5rem
        margin-left -0.3rem
        margin-top -0.3rem
        animation changeColor 2.5s linear infinite
      &.inner
        width .25rem
        height .25rem
        margin-left -0.18rem
        margin-top -0.18rem
        animation changeColor 1.5s linear reverse infinite
@keyframes changeColor
  50%
    border-top-color $edgeColor
    border-bottom-color $edgeColor
    transform rotate(180deg)
  100%
    border-top-color #75e1b0
    border-bottom-color #75e1b0
    transform rotate(360deg)
</style>
