Webpage Preloader


Author: Vincent Berger
Created: Jan 22, 2019






Play a nice animation for your clients while the webpage preloads all their scripts and codes. When the webpage is fully loaded the animation will stop, therefore a 'preloader'.
Make sure the DOM elements are loaded before the script does otherwise the script will not recognize the DOM and therefore it will not execute.

HTML & Javascript:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <!-- Preloader -->
        <div id="preload_wrapper">
            <div class="preloader">
                <div class="preloader">
                    <div class="preloader">
                        <div class="preloader"></div>
                    </div> 
                </div> 
            </div>  
        </div>
        
        
        <script>
            var doc=document.getElementById("preload_wrapper");
            window.addEventListener('load',()=>{
                var setT=setTimeout(()=>{
                    doc.style.display='none';
                },2000);
            })
        </script>
    </body>
</html>
                

CSS:

/* Preloader */
.preloader{
    width:160px; height:80px;
    border:9px solid#fff;
    border-top:10px solid#37f;
    border-bottom:10px solid#f73;
    border-radius:100%;
    position: absolute;
    top:0; bottom:0; left:0; right: 0;
    margin:auto;
    animation: rotates 2.5s infinite linear;
}
@keyframes rotates {
    from{
        transform: rotate(0deg);
    }to{
        transform: rotate(360deg);
    }
}
#preload_wrapper{
    height:100%; width:100%;
    background:rgba(0,0,0,0.60);
    position:fixed;
    left:0; top:0; z-index:100;
 }
                

Place a comment related to this article

!

When u want to use a code block in your comment, you need to work with the <pre> and <code> tags.
You can specify the program language you want to use in the comment to assign the code tag class attribute with your program language name.
<pre>
  <code class="javascript">
   //_ Use lowercase phrase within the code tags class attribute:
   //_ C++ refered as cpp
   //_ C# refered as cs
   //_ Objective-C and C both refered as c
   //_ VB.net refered as vbnet
   //_ And so on...
  </code>
</pre>
Available program languages:
  • Access log
  • Apache
  • AutoIt
  • Arduino
  • Bash
  • C
  • C#
  • C++
  • CSS
  • CoffeeScript
  • HTML or XML
  • JSON
  • Java
  • JavaScript
  • Nginx
  • Objective-C
  • PHP
  • Perl
  • Python
  • Ruby
  • SQL
  • Swift
  • PowerShell
  • VB.net
We do not allow any direct type of links in the comment section.
Please format a link with with the following query:
domain dot com/?q=query
Thank you for understanding.


3248fsdf1283 Captcha


Back to Top