Arrow Sign Loading Animation code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Arrow Sign Loading Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 60px; width: 300px; border: 4px solid black; border-radius: 4px; overflow: hidden; } ul { margin: 0; padding: 0; display: flex; background: red; height: 60px; width: 400px; } ul li { position: relative; list-style: none; width: 20px; height: 30px; background: black; margin: 0 10px; transform: skewX(35deg); animation: animate 2s linear infinite; } .center:hover ul li { animation: animate 0.5s linear infinite; } ul li::before { content: ''; position: absolute; width: 100%; height: 100%; background: white; top: 100%; transform: skew(126deg) translateX(-21deg); } @keyframes animate { 0% { transform: skewX(35deg) translateX(-100px); } 100% { transform: skewX(35deg) translateX(0px); } }
