Loading animation code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Loading</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container loader"> <span>L</span> <span>O</span> <span>A</span> <span>D</span> <span>I</span> <span>N</span> <span>G</span> </div> </body> </html>
2.style.css:
body { background: rgba(135,255,245); margin: 0; padding: 0; } .loader { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .loader span { font-family: Arial, Helvetica, sans-serif; font-size: 24px; color: rgb(4,237,253,0.1); display: inline-block; transition: all 0.5s; animation: animate 2s infinite; } .loader span:nth-child(1) { animation-delay: 0.1s; } .loader span:nth-child(2) { animation-delay: 0.2s; } .loader span:nth-child(3) { animation-delay: 0.3s; } .loader span:nth-child(4) { animation-delay: 0.4s; } .loader span:nth-child(5) { animation-delay: 0.5s; } .loader span:nth-child(6) { animation-delay: 0.6s; } .loader span:nth-child(7) { animation-delay: 0.7s; } @keyframes animate { 0% { color: rgba(255,0,0); transform: translateY(0); margin-left: 0; } 25% { color: rgba(247,210,1); transform: translateY(-15px); margin-left: 10px; text-shadow: 0 15px 5px rgba(0,0,0,1); } 100% { color: rgba(253,121,253); transform: translateY(0); } }
