<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style>.demo{width:100px; height: 100px; margin:30px auto; position: relative;} .demo i{ display: block; border-radius: 50%; border: 2px solid #333; border-color:transparent #333; position: absolute; } .demo i:first-child{ width: 50px; height: 50px; left:0;top:0; animation:loading-2 1s ease-in-out 0s infinite; } .demo i:last-child{width:20px; height: 20px; left:15px; top:15px; animation:loading-2 1s ease-in-out .5s infinite reverse;} @keyframes loading-2{ 0%{ transform:rotate(0) scale(1); } 50%{ transform:rotate(180deg) scale(.6); } 100%{ transform:rotate(360deg) scale(1); } }</style> </head> <body> <div class="demo"> <em></em> <em></em> </div> </body> </html>