Skip to main content

Archive

Show more

Rotating Boxes Website Loader | HTML And CSS

by Rustcode
Rotating-Boxes-Website-Loader-HTML-And-CSS

Rotating Boxes Website Loader Using HTML And CSS

"website loader" is used when the website content is loading but not visible clearly. A number of loader animations are available in the market with different concepts. You can check out more than thirty-five website loaders.

We have already created a number of loading animations. You can check out the youtube playlist and website playlist of the loader. We are continuously updating it.

This animation has two "square box" and those boxes are moving continuously. The rotation is creating an infinite loop. We are using html and css to create this animation.

You can check out our playlist "Effect on Image".

You can learn more responsive design from our youtube channel, we made a playlist there.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.

You can read interesting articles on web development. The link is given below.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Rotating Boxes Website Loader</title> 
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Rotating Boxes Website Loader</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="box-1">
        <div class="core"></div>
      </div>
      <div class="box-2">
        <div class="core"></div>
      </div>
    </div>
  </body>
</html>



03. CSS

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-1,
.box-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 115px;
  height: 115px;
  padding: 3px;
  background: transparent;
}

.box-1 {
  border: 2px solid grey;
  position: absolute;
  animation: clockwise 3s ease-in-out 0s infinite alternate;
}

.box-2 {
  border: 2px solid black;
  left: -115px;
  width: 115px;
  height: 115px;
  background-color: transparent;
  transform: rotate(45deg);
  animation: xclockwise 3s ease-in-out 0s infinite alternate;
}

@keyframes clockwise {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes xclockwise {
  0% {
    transform: rotate(45deg);
  }
  25% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(-135deg);
  }
  75% {
    transform: rotate(-225deg);
  }
  100% {
    transform: rotate(-315deg);
  }
}



04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment