How to Add Loading Animation to Website in 2 Minutes!

Показать описание

Add loading animation screen to website in just 2 minutes using event listener to hide the loader automatically when loading is completed.
=== Follow us on ===

Рекомендации по теме

Комментарии

Some improvement:
1.Change position: absolute to position:fixed and add z-index:1000 - A higher number -
2.Add a class with overflow:hidden to the body ( like: .preload {overflow: hidden;} ) don' forget to add the class to the body ( <body class="preload">...</body>)
3.Remove it when the page is loaded in the Jquery function ( ) inside $(window).on("load", function() {...});
You will notice the improvement when you'll get a page with a scrollbar.
Hope it will help someone.

BIhab-jbzk

Great and simple tutorial!
One suggestion: Instead of using 'position: absolute' to cover the page, I would use 'position: fixed' so if the site has a scroll bar, the animation covers all of it, not only the top part.

pedrosilva

Simple, to the point and answers the question that everyone came here for, Thanks!!

codewithryan

I had wanted to add a loader for a long time but couldnt get it to work. Thanks for this easy and good tutorial:)

phoenixflight

Cool, these little touches take a website from good to great!

plixplop

BEAUTIFUL!!! Thanks, every tutorial should be like this XD

caiofdacosta

great work in few seconds, simple, clear, great, Thanks Men <3 !

sofianebenhamza

This just solved half of my problems. Thanks!

iliamm

Great video, I've been looking for this tutorial for the past 4 hours, but all i saw was how to create a loading animation without actually applying it to the page

funnyariyo

Great video bro
love your work...
a ton of thanks for sharing your info and knowledge.

MuhammadIrfan

Thank you! That was really fast and useful

danielahermosillo

I want this loader but I don't have anything on my page that takes time to load. how can I make the loader stay on the page for 2 seconds for example and then go instead of waiting for all of the items on the page to load in?

fshhh

Video starts at 0:22 if someone is too lazy for watching 21 seconds

bitslay

thank youuu, it´s exactly what I was looking for :D.

eduardosaroka

Hi, some more changes were done and it did an awesome work for me, same concept was used on android app too.

goelsahab

How come if I add a background image, the loader doesn't work and freezes and disappears?

lewislendon

Can I ask if how to do this one if..lets take this case.. after I click the login button then it loads.. how can I direct this to my homepage? Thanks for the response

justinclydecartuciano

thankyou so much, this was very helpful

madhumur

How can I replace the cube with an image instead

JAk-

Where should I place the code?
After Head?

bladymheradop

How to Add Loading Animation to Website in 2 Minutes!

How to Add Loading Animation to Website in 2 Minutes!

How to Add a Loading Animation to Your WordPress Website | In Just 60 Seconds

CSS Preloaders | 15 Stunning CSS Loading Animation examples for your website

How To Create Skeleton Loading Animation With CSS

Add Loading Animation Effect on any Website For Free 🔥

Figma Basic: Loading animation in figma | Figma loading animation

Creative Loading animation | Figma Interactive Components

How to Add a Loading Animation to Your Website | In Just 2 Minutes |

How to build a Page Preloader in Wix Studio

Design Loading animation in adobe XD | XD design ||

How to make a Loader in HTML & CSS | Website Loading Animation

CSS Loading Animation - How to Create a Loading Animation Using HTML & CSS

Loading Animation/Animated Intro In Figma | Figma Tutorial

How to add a page loading animation — After Effects & Lottie in Webflow

How to Create Loading Circle Animation - Adobe After Effects Tutorial

Add Preloader or a Loading Animation to Your WordPress Website

OpenAI Loading Animation - Using Lottie on Bubble.io Tutorial

Button Loading Animation on click using HTML, CSS & Javascript | 2022

How to create a loading animation in Figma! Loading Bar | Spinner

Create Preloader gif animation in Photoshop | Loading Gif Animation Tutorial

How to Create Loading Animation Effects in PowerPoint

How to Make a Loading Animation in React | Loading Animations in React

OpenAI Loading Animation - Using CSS - Bubble Tutorial

Windows 10 loading animation | Easy After Effects tutorial