Vue 开发一个loading

loading效果图

非常简单，其实就是设置border，然后一个无限旋转的动画。

<template>
  <div class="loading-indicator">
    <div class="animation"></div>
  </div>
</template>

<style  >
.loading-indicator {
  padding: 100px;
}
.animation {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: transparent 2px solid;
  border-color: rgba(164, 76, 246, 0.1);
  border-right-color: #aa00ff;
  animation: rotating 0.7s linear infinite;
}
@keyframes rotating {
  form {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>