vue–loading–加载转圈圈效果
哈哈哈哈哈，固定的就很糟糕，使用的时候需要自己改，还好我自己不需要
分为：large（大） medium（中） small（小）；由于我暂时不需要，large没写
使用：
<!-- 默认中等大小的圈圈，需要使用小一点的，在组件上面加类名 class='loading-small' 即可 -->
<loading><loading>
HTML：
<template><div class="loading-medium"><span v-for="item in 8"></span></div>
</template>
CSS：
<style scoped>
/* 动画 */
@keyframes load {0% {transform: scale(1);background-color: #efefef;}50% {transform: scale(1.2);background-color: #ff6f19;}100% {transform: scale(1);background-color: #efefef;}
}
/* 小：.loading-small中:.loading-medium大：.loading-large
*/
.loading-medium {width: 35px;height: 35px;position: relative;
}
.loading-medium.loading-small {width: 25px;height: 25px;
}.loading-medium span {position: absolute;width: 5px;height: 5px;background-color: #efefef;border-radius: 50%;animation: load 1s linear infinite;
}
.loading-medium.loading-small span {width: 4px;height: 4px;
}/* 每个圈圈的位置设置，和动画执行的时间 */
.loading-medium span:first-child {top: 0;left: 50%;margin-left: -2.5px;margin-top: -2.5px;animation-delay: 0s;
}.loading-medium span:nth-child(2) {top: 25%;left: 25%;margin-top: -6.5px;margin-left: -7px;animation-delay: 0.125s;
}
.loading-medium.loading-small span:nth-child(2) {margin-top: -5px;margin-left: -5px;
}.loading-medium span:nth-child(3) {top: 50%;left: 0;margin-top: -2.5px;margin-left: -2.5px;animation-delay: 0.25s;
}.loading-medium span:nth-child(4) {bottom: 25%;left: 25%;margin-left: -7px;margin-bottom: -6.5px;animation-delay: 0.375s;
}
.loading-medium.loading-small span:nth-child(4) {margin-bottom: -5px;margin-left: -5px;
}.loading-medium span:nth-child(5) {bottom: 0;left: 50%;margin-left: -2.5px;margin-bottom: -2.5px;animation-delay: 0.5s;
}.loading-medium span:nth-child(6) {bottom: 25%;right: 25%;margin-bottom: -6.5px;margin-right: -7px;animation-delay: 0.625s;
}
.loading-medium.loading-small span:nth-child(6) {margin-bottom: -5px;margin-right: -5px;
}.loading-medium span:nth-child(7) {top: 50%;right: 0;margin-top: -2.5px;margin-right: -2.5px;animation-delay: 0.75s;
}.loading-medium span:last-child {top: 25%;right: 25%;margin-top: -6.5px;margin-right: -7px;animation-delay: 0.875s;
}
.loading-medium.loading-small span:last-child {margin-top: -5px;margin-right: -5px;
}
</style>
父组件调用：默认是medium大小
import loading from “@/components/loading.vue”;
<!-- 默认--medium大小 -->
<loading></loading>
<!-- 显示小loading -->
<loading :small="true"></loading>
效果展示图：
small:
medium:
