How to Make Loading Animation Effects Using CSS3

In this tutorial, we will show you how to make Loading Animation Effects Using CSS3. You can see demo on click below button and also available source code of this loading animation effect.

Demo Download

Step to Make Loading Animation Effect using CSS3

To make loading animation effect we need to follow the below steps

  1. Index.html
  2. Css file

1: Index.html

First of all we create a index.html file for write content and connect to style.css file in head section and following code paste in body section.

<body>
	<div class="loader">Loading...</div>
</body>

In above code we use just one div which class name is loading.

2: css files

Now create a css file and connect in html.

*{
  margin: 0;
  padding: 0;
}
body {
  background: #ebdddd;
}

.loader {
  width: 250px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  font-size: 25px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family: helvetica, arial, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  color: #ff0000;
  letter-spacing: 0.2em;
} 
.loader:hover{
  animation: loading 1s infinite alternate ease-in-out;
}
@keyframes loading {
  0% { color: #ff0000; }
  50% { color: green;}
  100% { color: #ff0000;}
}
.loader::before {
  content: "";
  top: 0;
  left: 0;
  display: block;
  width: 3px;
  height: 50px;
  background: #ff0000;
  position: absolute;
  
}
.loader::after {
  content: "";
  bottom: 0;
  right: 0;
  display: block;
  width: 3px;
  height: 50px;
  background: #ff0000;
  position: absolute;
  
}
.loader:hover::before {
  animation: load 1s infinite alternate ease-in-out;
}
@keyframes load {
  0% { left: 0; height: 50px; width: 3px; }
  20% { left: 0; height: 3px; width: 3px; }
  50% { height: 3px; width: 60px; background: green;}
  80% { left: 247px; height: 3px; width: 3px;}
  100% { left: 247px; height: 50px; width: 3px;}
}
.loader:hover::after {
  animation: loadd 1s infinite alternate ease-in-out;
  animation-delay: .5s;
}
@keyframes loadd {
  0% { right: 0; height: 50px; width: 3px; }
  20% { right: 0; height: 3px; width: 3px; }
  50% { height: 3px; width: 60px; background: green;}
  80% { right: 247px; height: 3px; width: 3px;}
  100% { right: 247px; height: 50px; width: 3px;}
}

As you can see in above code here you use before and affect element for animate bar.

Conclusion

Today we learnt how to make loading animation effect using css3, you can add multiple this type of animation in your website just by adding the HTML markup and css3.

If you found this tutorial helpful, share it with your friends and developers group.

Demo Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts

Leave a Reply

Your email address will not be published. Required fields are marked *