better preloaders, add progress information

idflood · Aug 18, 2012 · 9471883 · 9471883
1 parent 5750f6a
commit 9471883
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 10 deletions.
diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css
@@ -315,9 +315,29 @@ header h2 {
 #preloader .line {
   width: 92px;
   height: 16px;
-  margin-top: 6px;
+  margin-top: 7px;
   background: url("../assets_website/preloader_line.png") no-repeat 0 0;
 }
+.line_progress {
+  width: 0px;
+  height: 2px;
+  background: rgba(255,255,255,0.3);
+  position: absolute;
+  top: 10px;
+  left: 13px;
+}
+#preloading {
+  position: absolute;
+  left: 50%;
+  margin-left: -20px;
+  top: 48%;
+  color: #fff;
+  text-transform: uppercase;
+  font-size: 9px;
+  opacity: 0;
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  filter: alpha(opacity=0);
+}
 #start {
   position: absolute;
   width: 60px;
@@ -337,7 +357,7 @@ header h2 {
 #start .arrow {
   display: block;
   position: absolute;
-  top: 3px;
+  top: 4px;
   left: 50px;
   width: 12px;
   height: 9px;

diff --git a/src/stylesheets/screen.styl b/src/stylesheets/screen.styl
@@ -147,9 +147,27 @@ header
   .line
     width: 92px
     height: 16px
-    margin-top: 6px
+    margin-top: 7px
     background: url("../assets_website/preloader_line.png") no-repeat 0 0
 
+.line_progress
+  width: 0px
+  height: 2px
+  background: rgba(255,255,255, 0.3)
+  position: absolute
+  top: 10px
+  left: 13px
+
+#preloading
+  position: absolute
+  left: 50%
+  margin-left: -20px
+  top: 48%
+  color: #fff
+  text-transform: uppercase
+  font-size: 9px
+  opacity: 0
+
 #start
   position: absolute
   width: 60px
@@ -168,7 +186,7 @@ header
   .arrow
     display: block
     position: absolute
-    top: 3px
+    top: 4px
     left: 50px
     width: 12px
     height: 9px

diff --git a/views/index.jade b/views/index.jade
@@ -35,13 +35,20 @@ head
     var first_loader = new PreloadJS();
 
     var loadComplete = function() {
+      $(".line_progress").transition({opacity: 0}, 100);
       $("#preloader").stop().delay(120).transition({top: '290px', opacity: 0.0}, 150);
       window.setTimeout(function(){
         $("#start").delay(700).css("display", "block").transition({top: '296px', opacity: 1.0}, 200);
       }, 250);
     };
 
+    var onMainLoadProgress = function() {
+      // .line_progress max width = 67px
+      $(".line_progress").css("width", (loader.progress * 67) + "px");
+    };
+
     var firstLoadComplete = function() {
+      $("#preloading").stop().remove();
       // good to go :)
       $("#loader_wrapper").delay(300).transition({opacity: 1.0}, 500);
       $("header").delay(900).transition({opacity: 1.0}, 500);
@@ -50,19 +57,20 @@ head
       $("footer").delay(1400).transition({opacity: 1.0}, 1000);
 
       // add the preloader
-      $("header").append('<div id="preloader"><div class="line"></div></div><a id="start">Start<span class="arrow"></span></a>');
+      $("header").append('<div id="preloader"><div class="line"></div><div class="line_progress"></div></div><a id="start">Start<span class="arrow"></span></a>');
       $("#start").hide();
       $("#preloader").delay(1220).transition({top: '300px', opacity: 1.0}, 200);
 
       $("#start").click(function(e){
         e.preventDefault();
-        //initApp();
         chooseColor();
       });
 
       // add files to preloader
       loader.onComplete = loadComplete;
-      loader.loadManifest(["audio/walk_in_a_fog.mp3", "textures/glitch3.jpg", "textures/lens_dirt.jpg", "textures/building_road_reflection4.png", "textures/sunrise.png"]);
+      loader.onProgress = onMainLoadProgress;
+
+      loader.loadManifest(["audio/walk_in_a_fog.mp3", "textures/glitch3.jpg", "textures/lens_dirt.jpg", "textures/building_road_reflection4.png", "textures/sunrise.png", "assets_website/restart_black.png"]);
 
       if (requestAnimationFrame) {
         requestAnimationFrame(animate_preloader);
@@ -166,10 +174,10 @@ head
           $("header, h1, h2, #loader_wrapper, footer").css("opacity", 1.0);
           $("body").addClass("error");
         } else {
+          $("body").append('<div id="preloading">please wait...</div>');
+          $("#preloading").delay(500).transition({opacity: 1.0}, 1400);
           first_loader.onComplete = firstLoadComplete;
-          first_loader.loadManifest(["assets_website/bg6.jpg", "assets_website/separator.png", "assets_website/soulsonic.png", "assets_website/walk.png", "assets_website/loading.png", "assets_website/preloader_line.png", "assets_website/start.png", "assets_website/start_arrow.png", "assets_website/ce.png", "assets_website/google.png", "assets_website/facebook.png", "assets_website/twitter.png", "assets_website/google2.png", "assets_website/facebook2.png", "assets_website/twitter2.png", "assets_website/restart_black.png"]);
-
-
+          first_loader.loadManifest(["assets_website/bg6.jpg", "assets_website/separator.png", "assets_website/soulsonic.png", "assets_website/walk.png", "assets_website/loading.png", "assets_website/preloader_line.png", "assets_website/start.png", "assets_website/start_arrow.png", "assets_website/ce.png", "assets_website/google.png", "assets_website/facebook.png", "assets_website/twitter.png", "assets_website/google2.png", "assets_website/facebook2.png", "assets_website/twitter2.png"]);
         }
       });
     }