HomeCSS Trying My Favorite HTML CSS Loading Animation codes indicoderz June 18, 2021 0 Comments Facebook Twitter Trying My Favorite HTML CSS Loading Animation codes html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loading"> <div></div> <div></div> <div></div> <div></div> </div> </body> </html> Copy css .loading { display: inline-block; position: relative; width: 80px; height: 80px; } .loading div { position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: #000; animation-timing-function: cubic-bezier(0, 1, 1, 0); } .loading div:nth-child(1) { left: 8px; animation: loading1 0.6s infinite; } .loading div:nth-child(2) { left: 8px; animation: loading2 0.6s infinite; } .loading div:nth-child(3) { left: 32px; animation: loading2 0.6s infinite; } .loading div:nth-child(4) { left: 56px; animation: loading3 0.6s infinite; } @keyframes loading1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes loading3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes loading2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } } Copy Tags CSS Facebook Twitter
Post a Comment