Loading animation using css

Redxcyber
1 minute read

 

code 👇🏻


<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      background: grey;
      margin: 0;
      padding: 0;
    }
    .container {
      text-align: center;
      margin-top: 70%;
    }
    span {
      color: grey;
      font-size: 2.5em;
      font-weight: bold;
      margin-top: 50%;
      letter-spacing: 0.2em;
      animation: shadow1 1.5s infinite;
    }
     .yt-link{
    background-color: grey;
    text-decoration: none;
    display: block;
    width: 100%;
    color: black;
    text-align: center;
    font-family: 'Poppins',sans-serif;
    letter-spacing: 15px;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    box-shadow: -5px -5px 20px #585858;
}
    .l {
      animation-delay: 0s;
    }
    .o {
      animation-delay: 0.15s;
    }
    .a {
      animation-delay: 0.30s;
    }
    .d {
      animation-delay: 0.45s;
    }
    .i {
      animation-delay: 0.60s;
    }
    .n {
      animation-delay: 0.75s;
    }
    .g {
      animation-delay: 0.90s;
    }
    @keyframes shadow1 {
      0% {text-shadow: 0px 0px 0px black; }
      100% {text-shadow: 4px 4px 6px black; }       }
    }
  
  </style>
</head>
<body>
  <div class="container"> <span class="l">L</span> <span class="o">O</span> <span class="a">A</span> <span class="d">D</span> <span class="i">I</span> <span class="n">N</span> <span class="g">G</span>
  </div> <a class="yt-link" href="https://youtube.com/@codexpranav">TUTORIAL</a>
</body>
</html>