Pre Loading Animation with only css

Hello Coder! Welcome To The Codewaksh Blog. In This Blog, We Learn How To Write A Program Of Form Validation By Using Html and Css. We Make Pre loading animation page for web site.

I Hope You Enjoy Our Blog So Let’s Start With A  Html and Css For Pre Loading Animation.

OverView of Project

Compatible Browers: Chrome, Edge, Firefox, Opera, Safari, etc
Responsive: Yes

How to make Pre Loading Animation using HTML, CSS?

HTML

<div class="loader">
      <div class="box box-1 ">
        <span class="span-1"></span>
        <span class="span-2"></span>
      </div>
      <div class="box box-2">
        <span class="span-3"></span>
        <span class="span-4"></span>
      </div>
</div>
    <h2>Loading...</h2>

Explanation of Above Code <3,

>  The code starts with a div that has the class "loader".

>  This is where the loading animation will take place.

>  Next, there are two boxes with different classes.

> The first box has a span-1 class and spans across the width of the screen.

> The second box has a span-2 class and spans across the height of the screen.

> The next line in code creates an h2 tag with text "Loading..." which appears at top left corner     of browser window when page loads.
> The code is meant to load two boxes and then display a loading message.

CSS

* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}
body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  background-color: #222;
}
.loader {
  display: flex;
  flex-direction: column
}
.loader .box {
  display: flex;
}
.loader .box span {
  display: block;
  width: 120px;
  height: 120px;
  background-color: rgb(255, 255, 255);
  z-index: 10;
}
.loader .box-1 .span-1 {
  animation: slide-tl 3s infinite ;
}
@keyframes slide-tl {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  
  50%{
    transform: translateY(-50px) translateX(-50px) rotate(90deg);
  }
  
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
}
.loader .box-1 .span-2 {
  animation: slide-tr 3s infinite ;
}

@keyframes slide-tr {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  50% {
    transform: translateY(-50px) translateX(50px) rotate(-90deg);
  }
  
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
}


.loader .box-2 .span-3 {
  animation: slide-bl 3s infinite ;
}
@keyframes slide-bl {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  50% {
    transform: translateY(50px) translateX(-50px) rotate(-90deg);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
}
.loader .box-2 .span-4 {
  animation: slide-br 3s infinite ;
}
@keyframes slide-br {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  50% {
    transform: translateY(50px) translateX(50px) rotate(90deg);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
}
.loading{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri,
 'Trebuchet MS', sans-serif;
  color: #fff;
  font-size: 2rem;
  letter-spacing: 1px;
}

Explanation of Above Code <3,

In this CSS we give style all the elements and give proper padding, color, margin and better looks. Also we have import the google font in CSS.

copy all the CSS code and paste all these into your CSS file.

Css is All is you'r mind Do make sure do you'r best in css file <3

Thank You!

Learn how to create a Pre Loading Animation using HTML, CSS. in this article. Please leave a comment if we made a mistake or there was any confusion so we can respond or make learning easier for you.