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>
        <title>Page Title</title>
        <!-- Preloader -->
        <div id="preload_wrapper">
            <div class="preloader">
                <div class="preloader">
                    <div class="preloader">
                        <div class="preloader"></div>
            var doc=document.getElementById("preload_wrapper");
                var setT=setTimeout(()=>{


/* Preloader */
    width:160px; height:80px;
    border:9px solid#fff;
    border-top:10px solid#37f;
    border-bottom:10px solid#f73;
    position: absolute;
    top:0; bottom:0; left:0; right: 0;
    animation: rotates 2.5s infinite linear;
@keyframes rotates {
        transform: rotate(0deg);
        transform: rotate(360deg);
    height:100%; width:100%;
    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.
  <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...
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