< Back to Code

Create simple load screen with jquery javascript

Simple code to help you create a loading div and disappear when the document loaded.

You may not see the loading message when it’s on fast internet speed. So I add delay function to it (you dont need to add)

Loading...

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

<style>
    .loader{
        
    }
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
    $( document ).ready(function() {
        
        
        $(".loader").hide();
        
});
</script>
				
			

If you want to make the loader full screen, try the css as below.

You can also replace the text loading by any image GIF file you find on the internet

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

<style>
    .loader{
        width: 100vw;
        height: 100vh;
        position: fixed;
        background: white;
        z-index: 100;
        left: 0;
        top:0;
        text-align: center;
        border: 3px solid black;
        padding-top: 30%;
    }
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
    $( document ).ready(function() {
        
        
       $(".loader").hide();
        
});
</script>
				
			

© Copyright by JAYbranding – All rights reserved.

Chúng tôi mong muốn tư vấn chi tiết hơn cho quý khách.
Vui lòng nhập thông tin để nhận tự vấn