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>
