Page Loading Animations

Shows an animation on the page until all the content has finished loading.

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this feature.

  1. Include the common CSS

    For easy readability of your HTML documents, it is preferable to load the animation stylesheet from an external file.

    In the <head> of the HTML add the following line before theme.css:

    <link href="assets/css/loaders/loader-typing.css" rel="stylesheet" type="text/css" media="all" />

    This will provide all the necessary CSS for a loading animation.

    You can find other available loading animations in the assets/css/loaders folder.

    If you are not using inline CSS, proceed to Step3.

    While the above technique improves readability, it delays the loading of the page loader CSS. For faster loading of the CSS, include the animation CSS in-line in the <head> element before theme.css. This ensures that the loading animation is the first element displayed on the page.

    Include the following in a <style> tag in the <head> of the page. This is required for all page load animations.

    This needs to be done for each page where you wish to display a loading animation.

    <style>
@keyframes hideLoader{
   0%{ width: 100%; height: 100%; }
   100%{ width: 0; height: 0; }
}
body > div.loader{
       position: fixed;
       background: white;
       width: 100%;
       height: 100%;
       z-index: 1071;
       opacity: 0;
       transition: opacity .5s ease;
       overflow: hidden;
       pointer-events: none;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   body:not(.loaded) > div.loader{
       opacity: 1;
   }
   body:not(.loaded){
       overflow: hidden;
   }
body.loaded > div.loader{
   animation: hideLoader .5s linear .5s forwards;
}
</style>
  2. Include the css for the individual animation of your choice.

    The below example uses the Typing animation.

    Include the following <style> tag in the <head> of the page.

    <style>
 /* Typing Animation */
 .loading-animation {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   animation: typing 1s linear infinite alternate;
   position: relative;
   left: -12px;
 }

 @keyframes typing {
   0% {
     background-color: rgba(100,100,100, 1);
     box-shadow: 12px 0px 0px 0px rgba(100,100,100, 0.2),
       24px 0px 0px 0px rgba(100,100,100, 0.2);
   }

   25% {
     background-color: rgba(100,100,100, 0.4);
     box-shadow: 12px 0px 0px 0px rgba(100,100,100, 2),
       24px 0px 0px 0px rgba(100,100,100, 0.2);
   }

   75% {
     background-color: rgba(100,100,100, 0.4);
     box-shadow: 12px 0px 0px 0px rgba(100,100,100, 0.2),
       24px 0px 0px 0px rgba(100,100,100, 1);
   }
 }
</style>
  3. Include the .loader and .loading-animation HTML elements

    Add this snippet as the immediate first child of the <body> element.

    The div.loader is the full-screen element which will hide the page content. The div.loading-animation is the element which is used as the animation. The CSS may use the :before and :after pseudo-elements of this <div> to create more visible elements in the animation.

    <div class="loader">
 <div class="loading-animation"></div>
</div>
  4. Include the script which will hide the animation when the page is finished loading.

    Include the following <script> tag at the bottom of the page, before the closing </body> tag.

    <script type="text/javascript">
 window.addEventListener("load", function () {
   document.querySelector('body').classList.add('loaded');
 });
</script>

Included Animations

There are three animations included in the Jumpstart Template

Pulse (default)
@keyframes hideLoader {
  0% {
    width: 100%;
    height: 100%
  }
  100% {
    width: 0;
    height: 0
  }
}

body>div.loader {
  position: fixed;
  background: #fff;
  width: 100%;
  height: 100%;
  z-index: 1071;
  opacity: 0;
  transition: opacity .5s ease;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center
}

body:not(.loaded)>div.loader {
  opacity: 1
}

body:not(.loaded) {
  overflow: hidden
}

body.loaded>div.loader {
  animation: hideLoader .5s linear .5s forwards
}

.loading-animation {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  background-color: #009B72;
  border-radius: 100%;
  animation: pulse 1s infinite ease-in-out
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0)
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0
  }
}
Typing
/* Typing Animation */
.loading-animation {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: typing 1s linear infinite alternate;
  position: relative;
  left: -12px;
}

@keyframes typing {
  0% {
    background-color: rgba(100,100,100, 1);
    box-shadow: 12px 0px 0px 0px rgba(100,100,100, 0.2),
      24px 0px 0px 0px rgba(100,100,100, 0.2);
  }

  25% {
    background-color: rgba(100,100,100, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(100,100,100, 2),
      24px 0px 0px 0px rgba(100,100,100, 0.2);
  }

  75% {
    background-color: rgba(100,100,100, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(100,100,100, 0.2),
      24px 0px 0px 0px rgba(100,100,100, 1);
  }
}
Clock
/* Clock Animation */
.loading-animation{
    width: 24px;
    height: 24px;
    background-color: transparent;
    box-shadow: inset 0px 0px 0px 2px #222;
    border-radius: 50%;
    position: relative;
    margin: 38px auto;/* Not necessary- its only for layouting*/    
}
.loading-animation:after, .loading-animation:before{
    position: absolute;
    content:"";
    background-color: #222;
}
.loading-animation:after{
    width: 10px;
    height: 2px;
    top: 11px;
    left: 11px;
    -webkit-transform-origin: 1px 1px;
      -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
    -webkit-animation: minhand 2s linear infinite;
      -moz-animation: minhand 2s linear infinite;
            animation: minhand 2s linear infinite;
}

.loading-animation:before{
    width: 8px;
    height: 2px;
    top: 11px;
    left: 11px;
    -webkit-transform-origin: 1px 1px;
      -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
    -webkit-animation: hrhand 8s linear infinite;
      -moz-animation: hrhand 8s linear infinite;
            animation: hrhand 8s linear infinite;
}

@-webkit-keyframes minhand{
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes minhand{
    0%{-moz-transform:rotate(0deg)}
    100%{-moz-transform:rotate(360deg)}
}
@keyframes minhand{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

@-webkit-keyframes hrhand{
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes hrhand{
    0%{-moz-transform:rotate(0deg)}
    100%{-moz-transform:rotate(360deg)}
}
@keyframes hrhand{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}
Square
/* Square Animation */
.loading-animation{
    width: 20px;
    height: 20px;
    border:1px  rgba(50,50,50,1) solid;
    margin: 36px auto;
    position: relative;
    -webkit-animation: fill_color 5s linear infinite;
      -moz-animation: fill_color 5s linear infinite;
            animation: fill_color 5s linear infinite;
}
.loading-animation:after{
    width: 4px;
    height: 4px;
    position: absolute;
    content: "";
    background-color: rgba(50,50,50,1);
    top: -8px;
    left: 0px;
    -webkit-animation: square_check 1s ease-in-out infinite;
      -moz-animation: square_check 1s ease-in-out infinite;
            animation: square_check 1s ease-in-out infinite;
}

@keyframes square_check{
    25%{ left: 22px; top: -8px;}
    50%{ left: 22px; top: 22px;}
    75%{ left: -9px; top: 22px;}
    100%{ left: -9px; top: -7px;}
}

@keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(50,50,50,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(50,50,50,1);}
}

Make Your Own Animation

CSS animations are used because they animate during the page load process. SVG animations are paused before the page loads. For this reason, only CSS loading animations should be used.

Using the above technique, you can customize the CSS which animates the div.loading-animation element. Creative CSS and a knowledge of CSS animations and keyframes is required.

Any HTML may be added inside div.loader and any animation CSS may be provided in place of the above animation examples.