Display a loading bar before the entire page is loaded

javascript jquery progress-bar loading

219,824

Solution 1

HTML

<div class="preload">
<img src="http://i.imgur.com/KUJoe.gif">
</div>

<div class="content">
I would like to display a loading bar before the entire page is loaded. 
</div>

JAVASCRIPT

$(function() {
    $(".preload").fadeOut(2000, function() {
        $(".content").fadeIn(1000);        
    });
});

CSS

.content {display:none;}
.preload { 
    width:100px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
}

DEMO

Solution 2

Whenever you try to load any data in this window this gif will load.

HTML

Make a Div

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

CSS .

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('https://lkp.dispendik.surabaya.go.id/assets/loading.gif') 50% 50% no-repeat rgb(249,249,249);

jQuery

$(window).load(function() {
        $(".loader").fadeOut("slow");
});
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

Solution 3

I've recently made a page loader in VanillaJS for a project, just wanted to share it as, all the other answers, are jQuery based. It's a plug and play, one-liner.

let settings={backgroundColor:"#2774ab",filterBrightness:2,timeOnScreen:100},u=document.querySelector("*"),s=document.createElement("style"),a=document.createElement("div"),m="http://www.w3.org/2000/svg",g=document.createElementNS(m,"svg"),c=document.createElementNS(m,"circle");document.head.appendChild(s),s.innerHTML="@keyframes swell{to{transform:rotate(360deg)}}",a.setAttribute("style","background-color:"+settings.backgroundColor+";color:"+settings.backgroundColor+";display:flex;align-items:center;justify-content:center;position:fixed;top:0;height:100vh;width:100vw;z-index:2147483647"),document.body.prepend(a),g.setAttribute("style","height:50px;filter:brightness("+settings.filterBrightness+");animation:.3s swell infinite linear"),g.setAttribute("viewBox","0 0 100 100"),a.prepend(g),c.setAttribute("cx","50"),c.setAttribute("cy","50"),c.setAttribute("r","35"),c.setAttribute("fill","none"),c.setAttribute("stroke","currentColor"),c.setAttribute("stroke-dasharray","165 57"),c.setAttribute("stroke-width","10"),g.prepend(c),u.style.pointerEvents="none",u.style.userSelect="none",u.style.cursor="wait",window.onload=(()=>{setTimeout(()=>{u.style.pointerEvents="",u.style.userSelect="",u.style.cursor="",a.remove()},settings.timeOnScreen)});

Fundamentals

Generate a <script> element appended to the <head> element, containing any required styling.
Generate a <div> element, acting as overlay, prepended to the <body> element.
Generate a <svg> element, acting as loader, prepended to the previously generated <div> element.
On window.onload self generated elements are automatically removed.

The latest version is available on my GitHub.

Demo

Settings

let settings = {
    backgroundColor: "#2774ab",
    filterBrightness: 2,
    timeOnScreen: 100
}, //...

Option	Description
`backgroundColor`	Refer to MDN Web Docs color for acceptable values. The background-color CSS property sets the background color of an element. Default to Wordpress deep blue accent `#2774ab`
`filterBrightness`	number or percentage. The brightness of the `svg` loader element (brightness() CSS function). A value under `100%` darkens the loader, while a value over `100%` brightens it. The lacuna value for interpolation is `1`. Default to `2`.
`timeOnScreen`	Positive `integer`. The time on screen is appended to the page loading time. Default to `100` milliseconds.

219,824

Author by

Key-Six

Updated on July 09, 2022

Comments

Key-Six almost 2 years
I would like to display a loading bar before the entire page is loaded. For now, I'm just using a small delay:
```
$(document).ready(function(){
    $('#page').fadeIn(2000);
});
```
The page already uses jQuery.

Note: I have tried this, but it didn't work for me: loading bar while the script runs

I also tried other solutions. In most cases, the page loads as usual, or the page won't load/display at all.
Darshan Jain over 3 years

Best and easiest solution.
RK Ahir over 3 years

Is it possible to set opacity of white background when page loading? currently it is displaying white background and loader during page loading. I want to display transparent content during loading. Please let me know.
RK Ahir over 3 years

Also loader is not displaying exactly in center of page. Please help for this too.
RK Ahir over 3 years

How to stop loader after specific time? Currently it is not stopping and displaying all the time.
Smooth Neon over 3 years

Same problem. It's looped forever and it can't be stopped.
Snack'Eyes over 3 years

use (".loader").show(); and (".loader").hide(); for start and stop