Floating Loader
HTML CODE:-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <div class="container"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html> |
CSS CODE:-
body{ padding: 0; margin: 0; background-color:black; display: flex; align-items: center; justify-content: center; min-height: 100vh; } span{ position: relative; display: inline-block; width: 15px; height: 15px; background-color: #f2f05c; border-radius: 50%; animation: animate 1.5s infinite; } @keyframes animate{ 0%{ transform: translateY(0px); } 50%{ transform: translateY(50px); background-color:#fa4166; } 100%{ transform: translateY(0px); } } span:nth-child(1){ animation-delay: 0.1s; } span:nth-child(2){ animation-delay: 0.2s; } span:nth-child(3){ animation-delay: 0.3s; } span:nth-child(4){ animation-delay: 0.4s; } span:nth-child(5){ animation-delay: 0.5s; } span:nth-child(6){ animation-delay: 0.6s; } span:nth-child(7){ animation-delay: 0.7s; } span:nth-child(8){ animation-delay: 0.8s; } span:nth-child(9){ animation-delay: 0.9s; } span:nth-child(10){ animation-delay: 1.0s; } |