Infinity loading animation using HTML and CSS

Hello and welcome! Today, we'll will see how to create a gradient loading animation using HTML and CSS

HTML

Start with basic HTML structure. First, create a <div> with the class loading-box, which will contain our loader. Inside that, add another <div> with the class loader.

  <div class="loading-box">    <div class="loader"></div>  </div>
  

CSS

  *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  body{
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fefefe;
  }
  
  .loading-box{
      position: relative;
      width: 400px;
      height: 50px;
      border-radius: 50px;
      border: 2px solid #ededed;
      overflow: hidden;
  }
  

In above CSS, we're using Flexbox to center our loading-box.

Now, style loader.

  .loader{
      width: 100%;
      height: 100%;
      position: absolute;
      border-radius: 50px;
      background: linear-gradient(45deg, #b6b5ff, #ff9797);
      left: 0%;
  } 

Now that the loader is ready, let's animate it. You’ll notice the left property is currently set to 0%. Change it to -100% and add the animation to bring it to life.

  .loader{
      left: -100%;
      animation: load 3s linear infinite;
  }
  
  @keyframes load{
      0%{
          left: -100%;
      }
      100%{
          left: 100%;
      }
  }
  

So, it's done. I hope you understood each and everything. If you have doubt or I missed some point let me know in the comments.

Articles you may found Useful

1. Image rotate on hover
2. Top 3 Web development courses
3. JavaScript Roadmap

If you like, you can subscribe my youtube channel. I create awesome web contents. Subscribe

Thanks For reading.