Display a loading bar before the entire page is loaded

Question

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

User · Answer

HTML   lt div class  preload  gt   lt img src  http   i imgur com KUJoe gif  gt   lt  div gt    lt div class  content  gt  I would like to display a loading bar before the entire page is loaded    lt  div gt    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

User · Answer

Whenever you try to load any data in this window this gif will load   HTML  Make a Div   lt div class  loader  gt  lt  div gt    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         lt script src  https   code jquery com jquery-1 9 1 min js  gt  lt  script gt

User · Answer

Use a div  overlay with your loading info    gif that will cover all your page    lt div id  overlay  gt        lt img src  loading gif  alt  Loading    gt       Loading     lt  div gt    jQuery     window  load function          PAGE IS FULLY LOADED         FADE OUT YOUR OVERLAYING DIV        overlay   fadeOut            Here s an example with a Loading bar   jsBin demo     lt div id  overlay  gt       lt div id  progstat  gt  lt  div gt       lt div id  progress  gt  lt  div gt     lt  div gt      lt div id  container  gt       lt img src  http   placehold it 3000x3000 cf5  gt     lt  div gt    CSS     margin 0   body  font  200 16px 1 sans-serif    img  width 32 2       overlay    position fixed    z-index 99999    top 0    left 0    bottom 0    right 0    background rgba 0 0 0 0 9     transition  1s 0 4s     progress    height 1px    background  fff    position absolute    width 0                    will be increased by JS      top 50      progstat    font-size 0 7em    letter-spacing  3px    position absolute    top 50     margin-top -40px    width 100     text-align center    color  fff      JavaScript     function      function id v   return document getElementById v       function loadbar         var ovrl   id  overlay            prog   id  progress            stat   id  progstat            img   document images          c   0          tot   img length      if tot    0  return doneLoading         function imgLoaded          c    1        var perc     100 tot c   lt  lt  0              prog style width   perc        stat innerHTML    Loading    perc        if c   tot  return doneLoading              function doneLoading          ovrl style opacity   0        setTimeout function             ovrl style display    none            1200             for var i 0  i lt tot  i            var tImg       new Image          tImg onload    imgLoaded        tImg onerror   imgLoaded        tImg src       img i  src                  document addEventListener  DOMContentLoaded   loadbar  false

User · Answer

I ve recently made a page loader in vanilla  js for a project  just wanted to share it as all the other answers are jQuery based  It s a plug and play  one-liner  It automatically creates a  lt div gt  tag prepended to the  lt body gt   with a  lt svg gt  loader  If you want to customize the color you just have to update the t variable at the beginning of the script  var t  quot  106CF6 quot  u document querySelector  quot   quot   s document createElement  quot style quot   a document createElement  quot aside quot   m  quot http   www w3 org 2000 svg quot  g document createElementNS m  quot svg quot   c document createElementNS m  quot circle quot   document head appendChild s   s innerHTML  quot  sailor  background  quot  t  quot  color  quot  t  quot  display flex align-items center justify-content center position fixed top 0 height 100vh width 100vw z-index 2147483647  keyframes swell to transform rotate 360deg    sailor svg animation  3s swell infinite linear  quot   a setAttribute  quot id quot   quot sailor quot   document body prepend a  g setAttribute  quot height quot   quot 50 quot   g setAttribute  quot filter quot   quot brightness 175   quot   g setAttribute  quot viewBox quot   quot 0 0 100 100 quot   a prepend g  c setAttribute  quot cx quot   quot 50 quot   c setAttribute  quot cy quot   quot 50 quot   c setAttribute  quot r quot   quot 35 quot   c setAttribute  quot fill quot   quot none quot   c setAttribute  quot stroke quot   quot currentColor quot   c setAttribute  quot stroke-dasharray quot   quot 165 57 quot   c setAttribute  quot stroke-width quot   quot 10 quot   g prepend c   u style pointerEvents  quot none quot    u style userSelect  quot none quot    u style cursor  quot wait quot   window addEventListener  quot load quot  function   setTimeout function    u style pointerEvents  quot  quot    u style userSelect  quot  quot    u style cursor  quot  quot   a remove    100     You can see the full project and documentation on the GitHub

[javascript] Display a loading bar before the entire page is loaded

HTML

JAVASCRIPT

CSS

DEMO

Examples related to javascript

Examples related to jquery

Examples related to progress-bar

Examples related to loading