How to make a Preloader for Website Using GSAP

In this blog post, I’ll show you how to make a preloader for website using GSAP (GreenSock Animation Platform) — one of the most popular animation libraries for web developers.

If you’re building a modern website, chances are you’ve seen those cool little animations that play while the page is loading — maybe a spinning logo, a loading bar, or a fun animation. That’s called a preloader, and it’s a great way to make your site feel more polished while keeping users engaged as your content loads.

What is a Preloader?

A preloader is a visual element or animation that’s displayed while a website’s resources (like images, videos, or scripts) are being loaded. It helps improve user experience by:

Letting users know the page is loading.
Preventing sudden content jumps.
Adding an extra bit of style and brand identity.

Also Read:
Create Video using Product URL | Wondershare Virbo AI Tutorial
Add conversion tracking code in thank you page Woocommerce
Vidu AI – Best Image To Live Video Maker AI

Why Use GSAP for Preloader Animations?

GSAP is a high-performance JavaScript animation library that’s widely used for creating complex, smooth animations with ease. we are going to make a Preloader for Website. It is a lightweight, fast, and works well across all modern browsers.

Advantages of using GSAP:

Smooth, hardware-accelerated animations.
Intuitive syntax.
Easy timeline control.
Highly customizable.

What You’ll Need

To follow along, you’ll need to make a Preloader for Website:

Basic HTML & CSS knowledge.
GSAP library (which you can add via CDN).

Steps to Make A Preloader for website

Let’s make a Preloader for Website — a loader that fades out when the website finishes loading.

📂 Folder Structure:

/GSAP-loader.html  
/GSAP-loader.css  
/GSAP-loader.js

📝 HTML Code (GSAP-loader.html)

GSAP-loader Download HTML File

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GSAP Preloader - wpexpertrahul</title>
    <link rel="stylesheet" href="GSAP-loader.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>    
    <script src="GSAP-loader.js"></script>
 </head>
 <body>
    <div class="loading-screen">
      <div class="loader">
        <div class="loader-1 bar"></div>
      </div>
      <div class="counter">
        <div class="counter-1 digit">
          <div class="num">0</div>
          <div class="num num1offset1">1</div>
        </div>
        <div class="counter-2 digit">
          <div class="num">0</div>
          <div class="num num1offset2">1</div>
          <div class="num">2</div>
          <div class="num">3</div>
          <div class="num">4</div>
          <div class="num">5</div>
          <div class="num">6</div>
          <div class="num">7</div>
          <div class="num">8</div>
          <div class="num">9</div>
          <div class="num">0</div>
        </div>
        <div class="counter-3 digit">
          <div class="num">0</div>
          <div class="num">1</div>
          <div class="num">2</div>
          <div class="num">3</div>
          <div class="num">4</div>
          <div class="num">5</div>
          <div class="num">6</div>
          <div class="num">7</div>
          <div class="num">8</div>
          <div class="num">9</div>
        </div>
        <div class="counter-4 digit">
          <div class="num">%</div>
        </div>
      </div>
    </div>
  </body>
</html>

📝 CSS Code (GSAP-loader.css)

    body, html {
          margin: 0;
          padding: 0;
          height: 100%;
          font-family: "Inter", sans-serif;
      }
      .loading-screen {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #f8f4f3;
          color: #7B3C38;
          pointer-events: none;
          overflow: hidden;
          z-index: 999999;
      }
      .counter {
          position: fixed;
          left: 150px;
          bottom: 150px;
          display: flex;
          height: 100px;
          font-size: 100px;
          line-height: 102px;
          clip-path: polygon(0 0, 100% 0, 100% 100px, 0 100px);
          font-weight: 300;
          color: #7B3C38;
          overflow: hidden;
      }
      .counter-1, .counter-2, .counter-3, .counter-4 {
          position: relative;
          top: -15px;
      }
      .num1offset1 {
          position: relative;
          right: -15px;
      }
      .num1offset2 {
          position: relative;
      }
      .loader {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          height: 10px;
          transform: translate(-50%, -50%);
          display: flex;
          background: #fff;
      }
      .loader-1 {
          position: relative;
          background: #7B3C38;
          width: 100%;
          height: 100%;
          transform-origin: center;
      }
      .bar {
          height: 10px;
      }
      .hero__preview {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: transparent;
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
      }

📝 JavaScript Code (GSAP-loader.js)


    document.addEventListener("DOMContentLoaded", function () {
          const counter3 = document.querySelector(".counter-3");

          for (let i = 0; i < 2; i++) {
              for (let j = 0; j < 10; j++) {
                  const div = document.createElement("div");
                  div.className = "num";
                  div.textContent = j;
                  counter3.appendChild(div);
              }
          }
          const finalDiv = document.createElement("div");
          finalDiv.className = "num";
          finalDiv.textContent = "0";
          counter3.appendChild(finalDiv);

          function animate(counter, duration, delay = 0) {
              const numHeight = counter.querySelector(".num").clientHeight;
              const totalDistance = (counter.querySelectorAll(".num").length - 1) * numHeight;
              gsap.to(counter, {
                  y: -totalDistance,
                  duration: duration,
                  delay: delay,
                  ease: "power2.inOut",
              });
          }

          animate(counter3, 5);
          animate(document.querySelector(".counter-4"), 2);
          animate(document.querySelector(".counter-2"), 6);
          animate(document.querySelector(".counter-1"), 2, 4);

          gsap.to(".digit", {
              top: "-150px",
              stagger: {
                  amount: 0.25,
              },
              delay: 6,
              duration: 1,
              ease: "power4.inOut",
          });

          // Loader animation sequence
          const tl = gsap.timeline();

          tl.from(".loader-1", {
              width: 0,
              duration: 6,
              ease: "power2.inOut",
          })
          .to(".loader", {
              background: "none",
              duration: 0.1,
          })
          .to(".loader-1", {
              rotate: 90, // Rotate 90 degree
              duration: 1.5,
              ease: "power2.inOut",
          })
          .to(".loader", {
              scale: 50,
              duration: 1,
              ease: "power2.inOut",
          })
          .to(".loading-screen", {
              opacity: 0,
              duration: 0.5,
              ease: "power1.inOut",
          });
      });

How It Works:

HTML: Creates a #preloader div and a loader inside it.
CSS: Styles the preloader and spins the loader with keyframes.
JavaScript:
- Waits for the page to finish loading.
- Uses GSAP to fade out the preloader smoothly.
- Hides the preloader and shows the main content.

Customize Your Preloader!

You can replace the loader with your text animation, or a loading bar — GSAP makes it super easy to animate anything you like. You can Increase/decrease speed and loading time.

Final Thoughts

And that’s it — a clean, modern website preloader using GSAP!
It’s simple, lightweight, and adds a touch of interactivity to your site. You can enhance it further with complex timelines, SVG animations, or animated logos using GSAP’s full features.

Live Demo

If you’d like, I can help you set up a live — just ask!

Conclusion

Website preloaders aren’t just about looks — they help manage user expectations and improve perceived loading times. And with GSAP, creating one is super simple and powerful.

Try it out, make a preloader for website customize it, and give your website a stylish first impression!

If you found this post helpful, please like, comment, and share it with others. And if you’re new to the blog don’t forget to subscribe our Newsletter for more AI tool insights. Thank you for reading!

If you liked the information in this blog post, then subscribe to our blog below

Frequently Asked Questions

What is a website preloader and why should I use one?

A website preloader is a visual animation or graphic shown while a website’s content is loading. It improves user experience by letting visitors know something is happening behind the scenes and prevents them from staring at a blank page. It’s especially useful for websites with heavy images, videos, or scripts.

Is GSAP free to use for making preloaders?

Yes! GSAP (GreenSock Animation Platform) is free for personal and most commercial projects. Some advanced plugins are part of their paid Club GreenSock membership, but for basic animations like preloaders, you can use the free core library without any issues.

Can I use an image or logo in this loader?

Absolutely! You can replace the .loader <div> with an <img> tag or a custom SVG logo. Then, use GSAP animations like scale, rotate, fade, or even timeline sequences to animate your logo for a branded preloader experience.

Will the preloader affect my website’s loading speed?

A well-optimized, lightweight preloader like the one in this tutorial won’t significantly impact your website’s load speed. In fact, it can improve perceived performance by engaging users while the rest of your assets load in the background.

Can I customize the GSAP animation effects?

Yes — that’s one of GSAP’s biggest strengths! You can customize the duration, delay, easing functions, transforms, opacity, scale, rotation, and even chain multiple animations together using GSAP’s timeline feature for more complex preloaders.

Hello It’s Me, Rahul Baghel

Visionary Brain Behind Good4uh. I am a Web Developer and Designer and also a Digital Marketer. I’ve learned to leverage AI tools to boost productivity and creativity. As someone who values efficiency, AI has become my go-to assistant in streamlining tasks and elevating project outcomes.

Table of Contents