<template>
  <div class="loading-container">
    <div id="loadingBox" :style="{'margin-top':top+'px','border-width': borderWidth + 'px','border-top-width': borderTopWidth + 'px'}"></div>
  </div>
</template>

<script>
    export default {
    name: "loadingBox",
    props: ["top","borderColor","color","borderWidth","borderTopWidth"],
    data() {
      return {
      }
    },
    created() {
      //console.log(this.top);
    },
    methods: {
      
    }
    }
</script>
<style>
  .loading-container {
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    /*background: rgba(102, 102, 102, 0.28);*/
    z-index:9999;
  }

  #loadingBox {
    margin-top:200px;
    border: 3px solid hsla(185, 100%, 62%, 0.2);
    border-top-color: #0ce4eb;
    border-top-width:8px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin .7s linear infinite;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
</style>
