<template>
  <div class="loading" v-show="loadingStatus">
    <div class="wrapper">
      <div class="L">L</div>
      <div class="O">O</div>
      <div class=A>A</div>
      <div class="D">D</div>
      <div class="I">I</div>
      <div class="N">N</div>
      <div class="G">G</div>
    </div>
  </div>

</template>
<script>
  export default {
    props: {
      loadingStatus: {
        type: Boolean,
        default: () => false,
      }
    },
    data() {
      return {}
    }
  }

</script>
<style lang='scss' scope>
  body {
    // background-color: skyblue;
    margin: 0;
    padding: 0;
  }

  .loading {
    background: rgba(85, 85, 85, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
  }

  .wrapper {
    height: 50px;
    width: 500px;
    margin: 300px auto;
    display: flex;
    color: #fff;
    text-align: center;
    line-height: 50px;


  }

  .wrapper>div {
    border-radius: 15px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .L {
    background-color: #ef475d;
    flex: 1;
    animation: a 1s infinite alternate;

  }

  .O {
    background-color: #3170a7;
    flex: 1;
    animation: b 1s 0.14s infinite alternate;
  }

  .A {
    background-color: #74787a;
    flex: 1;
    animation: c 1s 0.28s infinite alternate;

  }

  .D {
    background-color: #45b787;
    flex: 1;
    animation: d 1s 0.42s infinite alternate;
  }

  .I {
    background-color: #b2cf87;
    flex: 1;
    animation: c 1s 0.56s infinite alternate;
  }

  .N {
    background-color: #f8df70;
    flex: 1;
    animation: b 1s 0.70s infinite alternate;
  }

  .G {
    background-color: #efafad;
    flex: 1;
    animation: a 1s 0.84s infinite alternate;
  }

  @keyframes a {
    from {}

    to {
      margin-bottom: -20px;
      margin-top: -20px;
      line-height: 90px;
    }
  }

  @keyframes b {
    from {}

    to {
      margin-bottom: -40px;
      margin-top: -40px;
      line-height: 130px;
    }
  }

  @keyframes c {
    from {}

    to {
      margin-bottom: -60px;
      margin-top: -60px;
      line-height: 170px;
    }
  }

  @keyframes d {
    from {}

    to {
      margin-bottom: -80px;
      margin-top: -80px;
      line-height: 190px;
    }
  }

</style>
