Skip to main content

Archive

Show more

Website Loader Animation Using GSAP | HTML, CSS And GSAP

Website-Loader-Animation-Using-HTML-CSS-And-GSAP

Website Loader Animation Using GSAP | HTML, CSS And GSAP

"Website loader animations" are used in almost every web application. On this topic, we keep coming up with new loading animation ideas. This "Website Loader Animation" is designed by Using HTML CSS and gsap. Because we have already created a lot of animation on the website loader. We have also created a dedicated playlist on website loaders. You must visit that playlist.

In this loading animation, we will have two balls moving along the path while the path remains stationary. The speed of both the balls will be different, so it will take different times to complete the path. This animation is for infinite time. We hope you like it.

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

If you want to learn animation using javascript, gsap and plugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. You can visit gsap animations playlist.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Website Loader Animation Using GSAP | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

To make this loader animation, we have included one external file inside the HTML document. In this loader we have animation, so we have used GSAP library, you can copy and paste this link in the HTML document. For complete details of GSAP visit the official website.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>


After including gsap in the HTML document, it will look like this even though we haven't written anything about the loader animation yet.

<!DOCTYPE html>
<html>
<head>
  <title>Website Loader Animation Using GSAP | Rustcode</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

  main content.

<script src="script.js"></script>
</body>
</html>


This is the main content of the HTML document 'body'.

<body>

  <div class="container">
  <div class="ball-1"></div>
  <div class="ball-2"></div>
  <div class="path"></div>
  </div>

</body>



03. CSS

body{
  padding: 0px;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #F2EDEB;
}

.path{
  width: 200px;
  height: 10px;
  background: #2A2D34;
  margin-bottom: 80px;
  border-radius: 6px;
}

.ball-1, .ball-2{
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: white;
}

.ball-1{
  top: 65px;
  background: #247BA0;
}

.ball-2{
  top: 25px;
  background: #5C946E;
}



04. JAVASCRIPT

new TimelineMax({repeat: -1})
	.to(".ball-1", 0.6, { x:180 })
	.to(".ball-1", 0.6, { x:0 });

new TimelineMax({repeat: -1})
	.to(".ball-2", 0.5, { x:180 })
	.to(".ball-2", 0.5, { x:0 });


05. Youtube Video

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



06. 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