Hello readers, Today in this blog you’ll learn how to create Microsoft Windows10 Loading Animation with the help of Html and CSS only in very easy way. Guys i also want to clear about this windows 10 loader that, it's not a windows 10 main loader which you have already seen verywell. Example - Windows 10 Loader during Booting up and Shuting Down. Yes guys, i'm talking about another loader/preloader and this is one. You have seen this type of loading animation when you are opening a software or application or folders/files in your windows 10 os system which takes a little bittime to open and during that time interval you maybe have seen it. if you have any doubt you can ask me in comment box.

Watch Tutorial of Microsoft loading animation in CSS only

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">
      <title>WebKitCoding</title>
   </head>
   <body>
      <div class="cover"></div>
       <div class="object"></div>
   </body>
   </html>

CSS CODE:

   *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
   }
   body{
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
   }
   .cover{
      height: 80px;
      width: 80px;
      border: 17px solid #00b0e9;
      border-radius: 50%;
   }
   .object{
      height: 80px;
      width: 80px;
      border: 17px solid #02fbf2;
      border-radius: 50%;
      border-top-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
      animation: animate 1s linear infinite;
      position: absolute;
   }
   @keyframes animate{
      100%{
         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 Microsoft loading Animation without using CSS only

Watch Tutorial of Microsoft loading animation in CSS only

Post a Comment

Post a Comment

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