I have used the spin element in iview to turn circles normally during chrome debug
, but
spin will only stop in person

what is missing in my code? Or is it a problem of its own?

<template>
<div>
    <spin class="loading_bar">
    <Icon  type="load-a"  size=180 class="demo-spin-icon-load"></Icon>
    </spin>
</div>
</template>

<script>
export default {
name: "bars",
props: [],
data () {
return { }
    }
}

</script>
<style scoped>
.loading_bar{
  position: fixed; /*positionfixed */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color:rgb(255, 255, 255,0.5);
  /* opacity: 0.5; */
}
 .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
    position: absolute; /*positionfixed */
    top: 35%;
    left: 35%;
    }
</style>

this is the noodle I want to use

<template>
            <bars v-if="bars"></bars>
</template>

<script>
import bars from "./spincircle"

export default {
  name: "IMPS03002",
  components: {
    bars

  },
  data () {
    return {
      bars:   false,
    
      header: {
        
      },
      lines: []
    }
  },
  computed: {

  },
  methods: {

     getHeaderLines: function () {

      this.bars=true
      this.status = ""
      var vm = this
      fetch(this.domain + "/WIPF/IMPS_API.do?reqCode=imps03002GetHeaderLines", {
        method: "POST",
        body: JSON.stringify(this.$data)
      })
        .then(response => response.json())
        .then(data => {
          this.bars=false
          console.log(data)
          if (data.result === "Y") {
            vm.status = ""
            this.header = data.header
            this.lines = data.lines
            // this.$Message.success("");
          } else {
            // vm.status = data.errMsg
            this.lines = ""
            // this.$Message.error("ASN!!!")
            this.$Message.error(data.errMsg);
          }
        })
        .catch(e => {
              this.bars=false
          console.log(e)
          this.$Message.error(e);
          // vm.status = e
        })
    },

}