How to show a running progress bar while page is loading

Question

I want to show a running progress bar while my page is loading like here  in my page   I used a simple loading image in my example  but I want to convert it in a running progress bar  Here is my code    x000D   x000D    window  load function     x000D      alert  hi    x000D          loading   hide    x000D      x000D   loading   x000D      width  100   x000D      height  100   x000D      top  0px  x000D      left  0px  x000D      position  fixed  x000D      display  block  x000D      opacity  0 7  x000D      background-color   fff  x000D      z-index  99  x000D      text-align  center  x000D    x000D   x000D   loading-image   x000D      position  absolute  x000D      top  100px  x000D      left  240px  x000D      z-index  100  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 6 0 jquery min js  gt  lt  script gt  x000D   lt div id  loading  gt  x000D       lt img id  loading-image  src  http   cdn nirmaltv com images generatorphp-thumb gif  alt  Loading       gt  x000D   lt  div gt  x000D   lt div id  txt  gt  x000D       lt h2 gt Let AJAX change this text lt  h2 gt  x000D   lt  div gt  x000D   lt button gt Change Content lt  button gt  x000D   x000D   x000D    Here is a JSFiddle

User · Answer

It   s a chicken-and-egg problem  You won   t be able to do it because you need to load the assets to display the progress bar widget  by which time your page will be either fully or partially downloaded  Also  you need to know the total size of the page prior to the user requesting in order to calculate a percentage   It   s more hassle than it   s worth

User · Answer

I have copied the relevant code below from This page  Hope this might help you     ajax     xhr  function         var xhr   new window XMLHttpRequest          Upload progress     xhr upload addEventListener  progress   function evt          if  evt lengthComputable            var percentComplete   evt loaded   evt total            Do something with upload progress         console log percentComplete                  false         Download progress     xhr addEventListener  progress   function evt          if  evt lengthComputable            var percentComplete   evt loaded   evt total            Do something with download progress         console log percentComplete                  false       return xhr         type   POST     url         data        success  function data          Do something success-ish

User · Answer

Take a look here   html file   lt div class  progress  id  progress div  gt      lt div class  bar  id  bar1  gt  lt  div gt      lt div class  percent  id  percent1  gt  lt  div gt   lt  div gt    lt div id  wrapper  gt      lt div id  content  gt        lt h1 gt Display Progress Bar While Page Loads Using jQuery lt p gt TalkersCode com lt  p gt  lt  h1 gt      lt  div gt   lt  div gt    js file  document onreadystatechange   function e      if  document readyState     interactive         var all   document getElementsByTagName           for  var i   0  max   all length  i  lt  max  i            set ele all i                 function check element ele      var all   document getElementsByTagName         var totalele   all length    var per inc   100   all length     if    ele  on          var prog width   per inc   Number document getElementById  progress width   value       document getElementById  progress width   value   prog width          bar1   animate         width  prog width              10  function           if  document getElementById  bar1   style width     100                  progress   fadeOut  slow                        else       set ele ele          function set ele set element      check element set element       it definitely solve your problem for complete tutorial here is the link http   talkerscode com webtricks display-progress-bar-while-page-loads-using-jquery php

User · Answer

In this sample  I created a JavaScript progress bar  with percentage display   you can control it and hide it with JavaScript     In this sample  the progress bar advances every 100ms  You can see it in JSFiddle  var elapsedTime   0  var interval   setInterval function       timer      100    function progressbar percent      document getElementById  prgsbarcolor   style width   percent          document getElementById  prgsbartext   innerHTML   percent           function timer       if  elapsedTime  gt  100        document getElementById  prgsbartext   style color     FFF       document getElementById  prgsbartext   innerHTML    Completed        if  elapsedTime  gt   107          clearInterval interval         history go -1             else       progressbar elapsedTime         elapsedTime

User · Answer

Simple Steps  follow them and  i guess it will solve your problem  Include these Css in your page    progress         position  relative        height  2px        display  block        width  100         background-color  white        border-radius  2px        background-clip  padding-box          margin  0 5rem 0 1rem 0          overflow  hidden              progress  indeterminate   background-color black         progress  indeterminate before         content            position  absolute        background-color   2C67B1        top  0        left  0        bottom  0        will-change  left  right        -webkit-animation  indeterminate 2 1s cubic-bezier 0 65  0 815  0 735  0 395  infinite                animation  indeterminate 2 1s cubic-bezier 0 65  0 815  0 735  0 395  infinite         progress  indeterminate after         content            position  absolute        background-color   2C67B1        top  0        left  0        bottom  0        will-change  left  right        -webkit-animation  indeterminate-short 2 1s cubic-bezier 0 165  0 84  0 44  1  infinite                animation  indeterminate-short 2 1s cubic-bezier 0 165  0 84  0 44  1  infinite        -webkit-animation-delay  1 15s                animation-delay  1 15s          -webkit-keyframes indeterminate         0            left  -35           right  100           60            left  100           right  -90           100            left  100           right  -90            keyframes indeterminate         0            left  -35           right  100           60            left  100           right  -90           100            left  100           right  -90            -webkit-keyframes indeterminate-short         0            left  -200           right  100           60            left  107           right  -8           100            left  107           right  -8            keyframes indeterminate-short         0            left  -200           right  100           60            left  107           right  -8           100            left  107           right  -8         Then include the progress bar your body tag    lt div class  progress  id  PreLoaderBar  gt           lt div class  indeterminate  gt  lt  div gt       lt  div gt    then it will start as your page loads  and now what you have to do is just hide this when the page loads or set the visibility to none  or hidden  using javascript   document onreadystatechange   function                  if  document readyState      complete                     console log document readyState                   document getElementById  PreLoaderBar   style display    none                             Let me Know if you face any problems and also  you can add any type of progress bar you can easily find them  for this example i have used a indeterminate progress bar

[javascript] How to show a running progress bar while page is loading

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to html5-canvas