Physical Address

Godawari 2 Attariya Kailali

Build a Kinetic Loading using HTML & CSS3

Hey, learner today In this blog post, We will be creating a Build a Kinetic Loading using HTML & CSS3 In the past post, we have created many projects one of them is a Content Placeholder Using HTML5 CSS3 & JavaScript. With Out wasting time Now it is time to create a Kinetic Loading.

Build a Kinetic Loading using HTML5 & CSS3

In this project, we have created an animation loading page using HTMl5 and CSS. Every website has a loading animation when you open a new tab or page. on the base of that, we have created a Full responsive animated Kinetic loading as you see in the above image.

At first, we used simple HTML for the basic layout of the page. With the help of CSS, we have animated the loading icon and some cool designs of the loading. You can see the preview in codepen you can edit and change some code as you like in the codepen

Preview of Kinetic Loading on Codepen

Codepen Link

You might like this

Build a Kinetic Loading using HTML & CSS3 [Source code]

For Creating a Responsive Content Placeholder Using HTML5 CSS3 & JavaScript. At first, you have to create two files (HTML and CSS) files with the named index.html and style.css in the same folder and you have to link the CSS file to HTML. after that paste, the HTML code in index.html, and paste the CSS code in style.css that’s all after pasting the code.

At first, you have to create an HTML file with the named index.html and paste the below HTML code on it and save it. Remember to give a .html extension to the HTML file.

<!DOCTYPE html>
<!--Codingthai.com--> 
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Kinetic Loader</title>
  </head>
  <body>
    <div class="kinetic"></div>
      </body>
</html>

After pasting the HTML code, Now have to create a second CSS file with the named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.

* {
  box-sizing: border-box;
}

body {
  background-color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.kinetic {
  position: relative;
  height: 80px;
  width: 80px;
}

.kinetic::after,
.kinetic::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: #fff;
  animation: rotateA 2s linear infinite 0.5s;
}

.kinetic::before {
  transform: rotate(90deg);
  animation: rotateB 2s linear infinite;
}

@keyframes rotateA {
  0%,
  25% {
    transform: rotate(0deg);
  }

  50%,
  75% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateB {
  0%,
  25% {
    transform: rotate(90deg);
  }

  50%,
  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(450deg);
  }
}

That’s all after pasting the code now your code will be successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media

Related Posts