<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>logging</title> <style> @keyframes beat{ 70%{ transform: scale(1,1); } 100%{ transform: scale(1.3,1.3); } } body{ margin: 0; padding: 0; background: #000; } .box{ width: 400px; height: 450px; /*border: 2px solid #000;*/ margin: 150px auto 0; text-align: center; } .box div{ float: left; width: 10px; height: 60px; margin: 50px 20px 50px; border-radius: 3px; border: 1px solid rgba(255,237,151,0.3); animation: beat 500ms linear 0s infinite alternate; background: #fff; } .box div:nth-child(1){ animation-delay: 100ms; } .box div:nth-child(2){ animation-delay: 200ms; } .box div:nth-child(3){ animation-delay: 300ms; } .box div:nth-child(4){ animation-delay: 400ms; } .box div:nth-child(5){ animation-delay: 500ms; } .box div:nth-child(6){ animation-delay: 600ms; } .box div:nth-child(7){ animation-delay: 700ms; } </style> </head> <body> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <!-- <p>Loading</p> --> </div> </body> </html>