Hey guys, Today in this blog you’ll learn how to create Google Type preloader/loader animation just using Html, CSS and Jqueryguys, here i have used jquery also make it act as preloading animation when user load or open a website then it's showing a loading aniamtion(time depends on internet speed connection) until that website completetly displayed. But here use can also use Javascript instead of jquery framework for creating any type of preloading animation.

Watch Tutorial of Animated Loader like Google by HTML, CSS & Jquery

I have also given some links below of different type of loading aniamtion(not preloader) which these are just created through Html & CSS only. may hope you will like these also.

Now with this video, I'm sure you have understood the basics behind creating this program for those of you still finding it difficult I'll be linking the source code in the description for you.

HTML CODE:

  <!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.0">
      <link rel="stylesheet" type="text/css" href="style.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <title>How To Create Animated Loader like Google by HTML, CSS & Jquery</title>
  </head>
  <body>
      <div class="main">
          <div class="loader"></div>
      </div>

      <!-- Jquery code here -->
      <script type="text/javascript">
          $(window).on("load",function(){
              $(".main").fadeOut(6000);
          });
      </script>
  </body>
  </html>

CSS CODE:

  *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  .main{
      height: 100vh;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: black;
  }
  .loader{
      height: 40px;
      width: 40px;
      color: #1424fa;
      border: 4px solid;
      border-radius: 50px;
      border-top-color: transparent;
      animation: loader 1s linear infinite;

  }
  @keyframes loader{
      25%{
          color: #03d644;
      }
      50%{
          color: #fbfe09;
      }
      75%{
          color: #fc0303;
      }
      to{
          transform: rotate(360deg);
      }
  }

Note : This given Download button link may contains some ads link. So, you may be clicked many times for downloading the source code files.

How To Create Animated Loader like Google by HTML, CSS & Jquery

Watch Tutorial of Animated Loader like Google by HTML, CSS & Jquery

Post a Comment

Post a Comment

How To Create Responsive Navigation Menu Bar With Search Box Using Html And CSS - WebKitCoding