<template> <div class="load"> <div class="loadEffect"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div></template><script> export default{ }</script><style scoped> .loadEffect{ width: 100px; height: 100px; position: relative; margin: 0 auto; margin-top:100px; } .loadEffect span { display: inline-block; width: 20px; height: 20px; background-image: linear-gradient(270deg, #623Fe9 0%, #5ddaf4 100%); border-radius: 50%; position: absolute; -webkit-animation: load 1.04s linear infinite; animation: load 1.04s linear infinite; transform: scale(0.2); -webkit-transform: scale(0.2); opacity: 0.1; } @keyframes load{ 0%{ transform: scale(1.2); -webkit-transform: scale(1.2); opacity: 1; } 100%{ transform: scale(0); -webkit-transform: scale(0); opacity: 0.5; } } @-webkit-keyframes load { 0%{ -webkit-transform: scale(1.2); opacity: 1; } 100%{ -webkit-transform: scale(0); opacity: 0.5; } } .loadEffect span:nth-child(1){ left: 0; top: 50%; margin-top:-10px; -webkit-animation-delay:0.13s; animation-delay:0.13s; } .loadEffect span:nth-child(2){ left: 14px; top: 14px; -webkit-animation-delay:0.26s; animation-delay:0.26s; } .loadEffect span:nth-child(3){ left: 50%; top: 0; margin-left: -10px; -webkit-animation-delay:0.39s; animation-delay:0.39s; } .loadEffect span:nth-child(4){ top: 14px; right:14px; -webkit-animation-delay:0.52s; animation-delay:0.52s; } .loadEffect span:nth-child(5){ right: 0; top: 50%; margin-top:-10px; -webkit-animation-delay:0.65s; animation-delay:0.65s; } .loadEffect span:nth-child(6){ right: 14px; bottom:14px; -webkit-animation-delay:0.78s; animation-delay:0.78s; } .loadEffect span:nth-child(7){ bottom: 0; left: 50%; margin-left: -10px; -webkit-animation-delay:0.91s; animation-delay:0.91s; } .loadEffect span:nth-child(8){ bottom: 14px; left: 14px; -webkit-animation-delay:1.04s; animation-delay:1.04s; }</style>