JavaScript Loading Screen while page loads

Question

This is a little hard to explain  So I ll try my best  So while a HTML page loads  I d like there to be a cool loading screen going on  When it finishes loading  I want the loading screen to clear and the HTML document to be shown   Basically  I want This   CSS      Absolute Center CSS Spinner     loading     position  fixed    z-index  999    height  2em    width  2em    overflow  show    margin  auto    top  0    left  0    bottom  0    right  0        Transparent Overlay     loading before     content        display  block    position  fixed    top  0    left  0    width  100     height  100     background-color  rgba 0 0 0 0 3          not  required  hides these rules from IE9 and below     loading not  required         hide  loading     text      font  0 0 a    color  transparent    text-shadow  none    background-color  transparent    border  0      loading not  required  after     content        display  block    font-size  10px    width  1em    height  1em    margin-top  -0 5em    -webkit-animation  spinner 1500ms infinite linear    -moz-animation  spinner 1500ms infinite linear    -ms-animation  spinner 1500ms infinite linear    -o-animation  spinner 1500ms infinite linear    animation  spinner 1500ms infinite linear    border-radius  0 5em    -webkit-box-shadow  rgba 0  0  0  0 75  1 5em 0 0 0  rgba 0  0  0  0 75  1 1em 1 1em 0 0  rgba 0  0  0  0 75  0 1 5em 0 0  rgba 0  0  0  0 75  -1 1em 1 1em 0 0  rgba 0  0  0  0 5  -1 5em 0 0 0  rgba 0  0  0  0 5  -1 1em -1 1em 0 0  rgba 0  0  0  0 75  0 -1 5em 0 0  rgba 0  0  0  0 75  1 1em -1 1em 0 0    box-shadow  rgba 0  0  0  0 75  1 5em 0 0 0  rgba 0  0  0  0 75  1 1em 1 1em 0 0  rgba 0  0  0  0 75  0 1 5em 0 0  rgba 0  0  0  0 75  -1 1em 1 1em 0 0  rgba 0  0  0  0 75  -1 5em 0 0 0  rgba 0  0  0  0 75  -1 1em -1 1em 0 0  rgba 0  0  0  0 75  0 -1 5em 0 0  rgba 0  0  0  0 75  1 1em -1 1em 0 0        Animation      -webkit-keyframes spinner     0        -webkit-transform  rotate 0deg       -moz-transform  rotate 0deg       -ms-transform  rotate 0deg       -o-transform  rotate 0deg       transform  rotate 0deg         100        -webkit-transform  rotate 360deg       -moz-transform  rotate 360deg       -ms-transform  rotate 360deg       -o-transform  rotate 360deg       transform  rotate 360deg          -moz-keyframes spinner     0        -webkit-transform  rotate 0deg       -moz-transform  rotate 0deg       -ms-transform  rotate 0deg       -o-transform  rotate 0deg       transform  rotate 0deg         100        -webkit-transform  rotate 360deg       -moz-transform  rotate 360deg       -ms-transform  rotate 360deg       -o-transform  rotate 360deg       transform  rotate 360deg          -o-keyframes spinner     0        -webkit-transform  rotate 0deg       -moz-transform  rotate 0deg       -ms-transform  rotate 0deg       -o-transform  rotate 0deg       transform  rotate 0deg         100        -webkit-transform  rotate 360deg       -moz-transform  rotate 360deg       -ms-transform  rotate 360deg       -o-transform  rotate 360deg       transform  rotate 360deg          keyframes spinner     0        -webkit-transform  rotate 0deg       -moz-transform  rotate 0deg       -ms-transform  rotate 0deg       -o-transform  rotate 0deg       transform  rotate 0deg         100        -webkit-transform  rotate 360deg       -moz-transform  rotate 360deg       -ms-transform  rotate 360deg       -o-transform  rotate 360deg       transform  rotate 360deg           HTML    lt div class  loading  gt Loading amp  8230  lt  div gt    to be happening while the page loads  when the page loads  That is cleared  and the rest of the HTML document is displayed   I m making a credits system and while the credits load i just really need it to say it s loading  people complain they can t click anything and i have to tell them all it s just loading   I d like to stay away from Ajax as much as possible since I d like to learn Javascript

User · Answer

I would suggest adding class no-js to your html to nest your CSS selectors under it like    loading       display  none       no-js  loading    display  block              and when you finish loading your credit code remove it      html   removeClass  no-js      This will hide your loading spinner as there s no no-js class in html it means you already loaded your credit code

User · Answer

If in your site you have ajax calls loading some data  and this is the reason the page is loading slow  the best solution I found is with     document  ajaxStop function        alert  All AJAX requests completed          https   jsfiddle net 44t5a8zm  - here you can add some ajax calls and test it

User · Answer

You can wait until the body is ready    x000D   x000D  function onReady callback    x000D    var intervalId   window setInterval function     x000D      if  document getElementsByTagName  body   0      undefined    x000D        window clearInterval intervalId   x000D        callback call this   x000D        x000D       1000   x000D    x000D   x000D  function setVisible selector  visible    x000D    document querySelector selector  style display   visible    block     none   x000D    x000D   x000D  onReady function     x000D    setVisible   page   true   x000D    setVisible   loading   false   x000D      x000D  body   x000D    background   FFF url  https   i imgur com KheAuef png   top left repeat-x  x000D    font-family   Alex Brush   cursive  important  x000D    x000D   x000D   page      display  none  padding  0 0 5em    x000D   page h1   font-size  2em  line-height  1em  margin-top  1 1em  font-weight  bold    x000D   page p    font-size  1 5em  line-height  1 275em  margin-top  0 15em    x000D   x000D   loading   x000D    display  block  x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    z-index  100  x000D    width  100vw  x000D    height  100vh  x000D    background-color  rgba 192  192  192  0 5   x000D    background-image  url  https   i stack imgur com MnyxU gif    x000D    background-repeat  no-repeat  x000D    background-position  center  x000D    x000D   lt link href  https   cdnjs cloudflare com ajax libs meyer-reset 2 0 reset min css  rel  stylesheet   gt  x000D   lt link href  https   fonts googleapis com css family Alex Brush  rel  stylesheet  gt  x000D   lt div class  page  gt  x000D     lt h1 gt The standard Lorem Ipsum passage lt  h1 gt  x000D     lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure x000D      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt  x000D   lt  div gt  x000D   lt div id  loading  gt  lt  div gt  x000D   x000D   x000D    Here is a JSFiddle that demonstrates this technique

User · Answer

At the beginning of your loading script  just make your    visible through css  display block   and make the rest of the page invisible through css display none     Once the loading is done  just make the loading invisible and the page visible again with the same technique  You can use the document getElementById   to select the divs you want to change the display    Edit  Here s what it would sort of look like  When the body finishes loading  it will call the javascript function that will change the display values of the different elements  By default  your style would be to have the page not visible the loading visible     lt head gt       lt style gt           page              display  none                     loading              display  block                 lt  style gt       lt script gt          function myFunction                         document getElementById  page   style display    block               document getElementById  loading   style display    none                  lt  script gt   lt  head gt    lt body onload  myFunction    gt       lt div id  page  gt        lt  div gt       lt div id  loading  gt        lt  div gt   lt  body gt

User · Answer

To build further upon the ajax part which you may or may not use  from the comments   a simple way to load another page and replace it with your current one is    lt script gt        document  ready  function               ajax               type   get               url   http   pageToLoad from               success  function response                       response   data which has been received and passed on to the  success  function                     body   html response                                      lt script gt

User · Answer

This method uses the WindowOrWorkerGlobalScope setInterval https   developer mozilla org en-US doc   method to track the ready states of the document  amp  see if the  lt body gt  element exists      Function  gt  Loader Screen Script  function LoaderScreenScript window   window  document   window document  undefined   window undefined    void 0           Initialization  gt   Processing Time  Condition  Timeout  Loader            let processingTime   0          condition   function                    Return             return document body                    timeout   function                    Return             return  processingTime   1e3    2                    loaderScreenFontSize   typeof window loaderScreenFontSize     undefined    window loaderScreenFontSize   14          loaderScreenMargin   typeof window loaderScreenMargin     undefined    window loaderScreenMargin   10          loaderScreenMessage   typeof window loaderScreenMessage     undefined    window loaderScreenMessage    Loading  please wait amp hellip            loaderScreenOpacity   typeof window loaderScreenOpacity     undefined    window loaderScreenOpacity    75          loaderScreenTransition   typeof window loaderScreenTransition     undefined    window loaderScreenTransition    675          loaderScreenWidth   typeof window loaderScreenWidth     undefined    window loaderScreenWidth   7 5          Function  gt  Update     function update                Set Timeout         setTimeout function                    Initialization  gt   Data  Metadata              var data   document createElement  loader-screen-element                    metadata   setInterval function                            Logic                              if else if else statement                                             if  document readyState     complete                                Alpha                         alpha                                Test                         test                                                             Insertion             document body appendChild data                   Style  gt   lt body gt   gt  Overflow             document body style     overflow  hidden  important  pointer-events  none  important  user-drag  none  important  user-select  none  important      document body getAttribute  style            trim                    Modification  gt  Data                    Inner HTML                 data innerHTML                         lt style media all type text css gt                              body  selection                                   background-color  transparent  important                                  text-shadow  none  important                                                             keyframes rotate                                   0    transform  rotate 0                                    to   transform  rotate 360deg                                                           lt  style gt                           lt div style  animation  rotate 1s ease-in-out 0s infinite backwards  border      loaderScreenWidth    px solid rgba 0  0  0      loaderScreenOpacity       border-top-color  rgba 0  51  255      loaderScreenOpacity       border-radius  50   height  75px  margin  0 auto  margin-bottom      loaderScreenMargin    px  width  75px  gt   lt  div gt                           lt small style  color  rgba 127  127  127   675   font-family    Open Sans      Calibri Light    Calibri  sans-serif  font-size      loaderScreenFontSize    px  important  margin  0 auto  margin-top      loaderScreenMargin    px  text-align  center  gt      loaderScreenMessage      lt  small gt                        Style                 data style    align-items  center  background-color  rgba 255  255  255   98   display  flex  flex-direction  column  height      innerHeight    px  justify-content  center  left  0  margin  auto  max-height  100   important  max-width  100   important  min-height  100vh  min-width  100vh  position  fixed  top  0  transition      loaderScreenTransition    s ease-in-out  width      innerWidth    px  z-index  2147483647                   Function                    Alpha                 function alpha                            Clear Interval                     clearInterval metadata                                         Test                 function test                            Style  gt  Data                            Background Color                         data style backgroundColor    transparent                               Opacity                         data style opacity   0                          Set Timeout                     setTimeout function                                Deletion                         data remove                                Modification  gt   lt body gt   gt  Style                         document body style   document body getAttribute  style   replace  overflow  hidden  important        replace  pointer-events  none  important        replace  user-drag  none  important        replace  user-select  none  important                                  document body getAttribute  style          trim      document body removeAttribute  style                             getComputedStyle data  getPropertyValue  animation-delay   replace   a-zA-Z  g      trim      getComputedStyle data  getPropertyValue  animation-duration   replace   a-zA-Z  g      trim      getComputedStyle data  getPropertyValue  transition-delay   replace   a-zA-Z  g      trim      getComputedStyle data  getPropertyValue  transition-duration   replace   a-zA-Z  g      trim      1e3    100                                timeout                   Logic              if else if else statement             if  condition               Update         update         else              Initialization  gt  Data         var data   setInterval function                    Logic                      if else if else statement                             if  condition                         Update  gt  Processing Time                 processingTime    1                      Update                 update                        Metadata                 metadata                                         Function  gt  Metadata         function metadata                    Clear Interval             clearInterval data                   Logic                      if else if else statement                    gt  Deletion                            if   data  in window  amp  amp  typeof data     undefined                   delete window data                    window  window document  window undefined    void 0    This pre-loading screen was made by Lapys   https   github com LapysDev

[javascript] JavaScript Loading Screen while page loads

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to loading