<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Loader</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
        
    </head>
    <body>
      
      <div class="main-container">
        
        <div class="firework"></div>
        
        <div class="loader-container">
          
          <div class="loader-spark"></div>
          
          <progress value="0" max="100" class="progress-bar"></progress>
          
          <h2 class="loading-title">
            <span class="loading-title-val">
              0%
            </span>
            <span class="loading-title-wait">Loading, please wait</span>
          </h2>
          
        </div>
        
      </div>

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
      <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

      <script src="js/main.js"></script>

        
    </body>


/* =======================
   Page Load Styles
   @autor: Yane Frenski
   ===================== */

html, body{
  height: 100%;
  margin: 0;
  paddin: 0;
}
 
body{
  background: white;
}

.main-container{
  height:100%;
  position: relative;
  background-color: #231e1f;
}

.loader-container{
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -120px;
  font-family: Georgia, Times, 'Times New Roman', serif;
}

.progress-bar{
  border: none;
  width: 200px;
  height: 1px;
  background-color:#a8a8a8;
}

.progress-bar[value]::-webkit-progress-bar {
  background-color:#a8a8a8;
}

.progress-bar[value]::-webkit-progress-value {
  background-color:#231E1F;
}

.progress-bar[value]::-moz-progress-bar { 
  background-color:#231E1F;
}

.progress-bar[aria-valuenow]:before  {
    background: #231E1F;
}

.loader-spark{
  width: 15px;
  height: 15px;
  background: url('http://78.47.222.66/snippets/progress-bar/img/spark.png') no-repeat left top;
  position: absolute;
  top: 10px;
  left: -10px;
}

.loading-title{
  font-size: 1em;
  font-style: italic;
  color: #e9d9c6;
  text-align: center;
  font-weight: normal;
  margin: 30px 0 0 0;
}

.loading-title .loading-title-val{
  display: block;
  color: #ffae05;
  margin-bottom: 10px;
}

.firework{
  width: 40px;
  height: 105px;
  background: url('http://78.47.222.66/snippets/progress-bar/img/firework.png') no-repeat 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: 70px;
  margin-top: -51px;
}
/*
 * Javascript for the progress bar
 * @author - Yane
 */

$(document).ready(function() {  
  
    var pBar = $('.progress-bar');
    var spark = $('.loader-spark');
    var firework = $('.firework');
    var lTitleVal = $('.loading-title-val');
    var lTitleWait = $('.loading-title-wait');
    var mainContainer = $('.main-container')
    var loadMax = pBar.attr('max');  
    var loadValue = pBar.val();
    var sparStartPos = spark.position().left;
    var pBarWidth = $('.progress-bar').width();
    var pBarStep = pBarWidth/loadMax;
    
    // A function to update the progress bar and spark values
    // retruns 'loaded' when it's done
    var loadingUpdate = function ( val ){
      
      addValue = pBar.val(val);
      spark.css( 'left', (sparStartPos + val*pBarStep) + 'px' );
      lTitleVal.text( val+'%' );
      
      if ( val == loadMax ){
        spark.hide();
        lTitleWait.text( 'Loaded! Launching it!' );
        launchIt();
        return 'loaded';
      }else{
        return 'loading';
      }
      
    }
    
    // An action to take after it's loaded
    var launchIt = function (){
      spriteAnimation( firework, 40, 30, 0, 9, false, function(){
        spriteAnimation( firework, 40, 30, 9, 18, true, false);
        firework.delay(300).animate({top:"-200px"}, 1000, function(){
          mainContainer.fadeTo(100,0.4).fadeTo(100,0.9).fadeTo(100,0.4).fadeTo(100,0.9).fadeOut(300);
        });
      });
    }
    
    
    // Function for the sprite animation
    var spriteAnimation = function ( el, 
                                     spriteWidth, 
                                     spriteAnimFrame, 
                                     frameStart, 
                                     frameCount,
                                     loop,
                                     fallback ){
      
      var frame = frameStart;
      
      var animateSprite = function(){
        
        frame ++;

        $( el ).css('background-position','-'+(frame*spriteWidth)+'px 0');

        if ( frame < frameCount ) {
          setTimeout(function() {
            animateSprite( );
          }, spriteAnimFrame);
        }else{
          if ( loop ){
            frame = frameStart;
            animateSprite( );
          }else{
            if( fallback ){
              try {
                fallback();
              }
              catch(err) {

              }
            }
          }
        }
        
      }
      
      animateSprite();

    }
    
    // simuating loading in order to show how it works, since we have actually
    // nothing to load currently
    
    var simulateLoading = function(){
      
      var timeInterval = (1000/loadMax)*5; 

      var loading = function() {  
          loadValue += 1;  

          if (loadingUpdate(loadValue) == 'loaded') {  
              clearInterval(animateProgress);                      
          }  
      };  

      var animateProgress = setInterval(function() {  
          loading();  
      }, timeInterval);
      
    }
    
    spriteAnimation( spark, 15, 30, 0, 10, true, false );
    
    simulateLoading();
    
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js