Preloader Loading Animation Using Html, Css And Gsap

Preloader Loading Animation Using Html, Css And Gsap. A preloader is a web user interface that displays while a web page, computer program, or other digital content is loading. The word preloader is often used to refer to the interface that displays while a web page is loading.

A preloader can be implemented with Html, Css, and Gsap. Gsap is a javascript library that is used to create various web animations smoothly. A GSAP animation can be used to create an interactive loading screen or an animated loader.

let's discuss the concept of this animation. The first Animation starts with a black line that is going from left to right without changing position or moving. After that "loading word" goes down with smooth animation. There is a green background that will animate height from 100vh to 0vh after loading the word animation. Before the background achieves its 0vh "Welcome Back" word animation will become start. So we used a "timeline" to do all these animation steps by step. Now it's time to code this concept so let's get started without further ado.

For more gsap animations you can follow the gsap playlist.

You can read more about web development from this playlist.

01. HTML
02. CSS
03. Script
04. Output
05. Youtube Video
06. Source Code

HTML:

Let's start with the boilerplate of html document which you can see below.

<!DOCTYPE html>
<html>
<head>
 <title>Preloader Loading Animation Using Gsap | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

Body Content 

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

Now let's include the gsap link which is given below.

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

It is time to include all the body content in the html document.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <title>Preloader Loading Animation Using Gsap | Rustcode</title>
</head>
<body>

<div id="main-container">
  <h2>Welcome Back!</h2>
  <div class="loader">
    <span class="text">
      <h1>Loading Animation</h1>
    </span>
    <span class="line-container">
      <span class="line"></span>
    </span>
  </div>
</div>

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

</body>
</html>

Read Also:

CSS:

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Berkshire+Swash&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;0,6..96,900;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700;1,6..96,800;1,6..96,900&display=swap');

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Abril Fatface", cursive;
}

body, html{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f9f9f9;
}

#main-container{
  width: 100%;
  height: 100%;
  position: relative;
  top: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loader{
  position: absolute;
  top: 0px;
  bottom: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: springgreen;
  width: 100vw;
  height: 100vh;
}

.loader h1{
  position: relative;
  color: #333;
  font-size: 50px;
  font-weight: 500;
}

.loader .text{
  overflow: hidden;
}

.line-container{
  position: relative;
  width: 450px;
  height: 6px;
  overflow: hidden;
  border-radius: 10px;
}

.line{
  position: absolute;
  width: 450px;
  height: 6px;
  background: #333;
  right: 0;
  overflow: hidden;
}

h2{
  font-weight: 500;
  font-size: 50px;
  transform: translateY(-100px);
  font-family: "Berkshire Swash", cursive;
}

Read Also:

SCRIPT:

const tl = gsap.timeline();

tl
.to(".line",{
  width: "0%",
  duration: 1,
  delay: 0.1,
  ease: Power4.easeInOut
})
.to("h1",{
  y: 100,
  duration: 1,
  delay: -0.5,
  opacity: 1,
  ease: Power4.easeInOut
})
.to(".loader",{
  height: 0,
  top: "100%",
  duration: 0.8,
  delay: -0.6,
  ease: Circ.easeInOut
})
.to("h2",{
  y: 0,
  duration: 0.8,
  delay: -0.6,
  ease: Power3.easeInOut
})

Output:

Read Also:

Youtube Video:

We also made a youtube video for "Preloader Loading Animation Using Html, Css And Gsap", if you want to watch and want to learn every step of this design.

Source Code:

Before jumping in to download the source code. First, write this code yourself and then you can cross-check it with reference code.

Read Also:

Archive

Preloader Loading Animation | Html, Css And Gsap

Preloader Loading Animation Using Html, Css And Gsap

Table Of Contents

HTML:

CSS:

SCRIPT:

Output:

Youtube Video:

Source Code:

Comments

Post a Comment