<template>
  <div class="loadwrap">
    <div class="loading">
      <span></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Loading'
}
</script>

<style scoped>
.loadwrap{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  color: #fff;
}
.loading{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 auto;
  margin-top:100px;
  position: relative;
  border:5px solid lightgreen;
  -webkit-animation: turn 2s linear infinite;
}
.loading span{
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: lightgreen;
  position: absolute;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
  -webkit-animation: changeBgColor 2s linear infinite;
}
@-webkit-keyframes changeBgColor{
  0%{
    background: lightgreen;
  }
  100%{
    background: lightblue;
  }
}
@-webkit-keyframes turn{
  0%{
    -webkit-transform: rotate(0deg);
    border-color: lightgreen;
  }
  100%{
    -webkit-transform: rotate(360deg);
    border-color: lightblue;
  }
}


</style>
