vue实现加载动画
思路：只需要先把loading的盒子摆在正中间，然后，里面的每个item都使用绝对定位，并且水平垂直居中，然后先旋转，再位移，就可以呈现一个环状，接着指定动画，并设置延迟即可。（其实，下边并不需要给loading指定大小，这样就不用设置上下左右都是0，margin是auto了）
<style lang="scss">body {margin: 0;}.modal {background: #202020;height: 100vh;width: 100vw;display: flex;align-items: center;justify-content: center;}.loading {position: relative;width: 50px;height: 50px;div {top: 0;left: 0;bottom: 0;right: 0;margin: auto;position: absolute;width: 5px;height: 20px;border-radius: 5px;background-color: #ff7300;animation: loading-spin 1s infinite;}}@keyframes loading-spin {0% {opacity: 0;}100% {opacity: 1;}}.loading .item1 {transform: rotate(30deg) translate(0,-120%);animation-delay: 1.1s;}.loading .item2 {transform: rotate(60deg) translate(0,-120%);animation-delay: 1s;}.loading .item3 {transform: rotate(90deg) translate(0,-120%);animation-delay: 0.9s;}.loading .item4 {transform: rotate(120deg) translate(0,-120%);animation-delay: 0.8s;}.loading .item5 {transform: rotate(150deg) translate(0,-120%);animation-delay: 0.7s;}.loading .item6 {transform: rotate(180deg) translate(0,-120%);animation-delay: 0.6s;}.loading .item7 {transform: rotate(210deg) translate(0,-120%);animation-delay: 0.5s;}.loading .item8 {transform: rotate(240deg) translate(0,-120%);animation-delay: 0.4s;}.loading .item9 {transform: rotate(270deg) translate(0,-120%);animation-delay: 0.3s;}.loading .item10 {transform: rotate(300deg) translate(0,-120%);animation-delay: 0.2s;}.loading .item11 {transform: rotate(330deg) translate(0,-120%);animation-delay: 0.1s;}.loading .item12 {transform: rotate(360deg) translate(0,-120%);animation-delay: 0s;}
</style>
<template><div class="modal"><div class="loading"><div class="item1"></div><div class="item2"></div><div class="item3"></div><div class="item4"></div><div class="item5"></div><div class="item6"></div><div class="item7"></div><div class="item8"></div><div class="item9"></div><div class="item10"></div><div class="item11"></div><div class="item12"></div></div></div>
</template><script>export default {name: 'loading',components: {}
}
</script>
