Version 1.2.0

New "doubleLoader" animation added
Gix075 · Jan 3, 2015 · 90114e3 · 90114e3
1 parent 740622c
commit 90114e3
Show file tree

Hide file tree

Showing 8 changed files with 276 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-jqueryIntroLoader (version 1.1.3)
+jqueryIntroLoader (version 1.2.0)
 ===================================
 
 a jQuery plugin for generate animated Intro Loading Pages.
@@ -51,6 +51,9 @@ This plugin use some tird party software to do something during animations.<br>
 [SpinJs](fgnass.github.io/spin.js/) and [jQueryEasing](http://gsgd.co.uk/sandbox/jquery/easing/)
 
 ###ChangeLogs
+**version 1.2.0**<br>
+*------------------*<br>
+New animation *"doubleLoader"* added.<br>
 **version 1.1.3**<br>
 *------------------*<br>
 white colored background added to the loader<br>
@@ -68,4 +71,4 @@ some bug correction
 
 **version 1.1.0** <br>
 *------------------*<br>
-.stop() data method added (with 2 related new plugin options);
+.stop() data method added (with 2 related new plugin options);
diff --git a/demo/demo-doubleloader.html b/demo/demo-doubleloader.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>jQuery IntroLoader Demo</title>
+        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800,300' rel='stylesheet' type='text/css'>
+        <link href="demo.css" rel="stylesheet">
+
+        <!-- PLUGIN INCLUSION  ------------------------------------- -->
+        <!-- css -->
+        <link href="../dist/css/introLoader.css" rel="stylesheet">
+		<!-- jQuery, Helpers and jqueryIntrLoader -->
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
+		<script src="../dist/helpers/jquery.easing.1.3.js"></script>
+        <script src="../dist/helpers/spin.min.js"></script>
+        <script src="../dist/jquery.introLoader.js"></script>
+        <!-- -------------------------------------------------------- -->
+
+	</head>
+	<body>
+		<div id="element" class="introLoading"></div>
+        <h1>jqueryIntroLoader demopage</h1>
+        <h3>DoubleLoader Animation Example</h3>
+        <p>
+            <a href="index.html" class="button backtoindex" title="Default Options Demo">Back to Demos Index</a>
+        </p>
+        <div class="animDescription">
+            <h2>Animation description</h2>
+            <p>
+                This is a simple demo of jqueryIntroLoader using "doubleLoader" animation.
+            </p>
+
+<code><pre>
+$("#element").introLoader({
+    animation: {
+        name: <strong>'doubleLoader'</strong>,
+        options: {
+            effect:'fadeOut',
+            ease: "easeInOutCirc",
+            style: 'fluoGreen',
+            delayTime: 500,
+            animationTime: 300,
+            progbarAnimationTime: 700,
+            progbarDelayAfter: 400
+        }
+    }
+});
+</pre></code>
+
+
+        </div>
+
+
+		<script>
+			$(document).on('ready', function() {
+				$("#element").introLoader({
+                    animation: {
+                        name: 'doubleLoader',
+                        options: {
+                            effect:'fadeOut',
+                            ease: "easeInOutCirc",
+                            style: 'fluoGreen',
+                            delayTime: 500,
+                            animationTime: 300,
+                            progbarAnimationTime: 700,
+                            progbarDelayAfter: 400
+                        }
+                    }
+                });
+			});
+		</script>
+
+
+
+        <!-- Google Analytics -->
+        <script>
+            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
+            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
+            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
+            e.src='//www.google-analytics.com/analytics.js';
+            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
+            ga('create','47727083');ga('send','pageview');
+        </script>
+
+	</body>
+</html>
diff --git a/demo/index.html b/demo/index.html
@@ -28,6 +28,10 @@ <h3>SimpleLoader Animation</h3>
             <li><a href="demo-simpleloader-slidebottom.html" title="SimpleLoader Demo">SimpleLoader: slideBottom + callback onAfter</a></li>
             <li><a href="demo-simpleloader-slideup.html" title="SimpleLoader Demo">SimpleLoader: slideUp + onBefore + callback onAfter</a></li>
         </ul>
+        <h3>DoubleLoader Animation</h3>
+        <ul>
+            <li><a href="demo-doubleloader.html" title="DoubleLoader Demo">DoubleLoader Demo</a></li>
+        </ul>
         <h3>New Start/Stop methods (from version 1.1.0)</h3>
         <ul>
             <li><a href="demo-simpleloader-startstop.html" title="Start and Stop">Manual Plugin Start/Stop Example</a></li>

diff --git a/dist/css/introLoader.css b/dist/css/introLoader.css
@@ -1,4 +1,4 @@
-/*!
+/*
  *  jQueryIntroLoader
  *  Animated intro loading pages
  *  http://factory.brainleaf.eu/jqueryIntroLoader
@@ -63,6 +63,101 @@
 }
 
 
+/* ##################################################################################### */
+/* ANIMATION : doubleLoader */
+/* ##################################################################################### */
+.doubleIntroLoader {
+    background: transparent!important;
+}
+.introLoaderTop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 50%;
+    background-color: #333;
+}
+.introLoaderBottom {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 50%;
+    background-color: #333;
+}
+.doubleIntroLoaderProgBar {
+    position: absolute;
+    top: 50%;
+    margin-top: -10px;
+    width: 100%;
+    height: 20px;
+    background-color: #fff;
+    z-index: 9999999999999;
+}
+
+.doubleIntroLoaderProgBar span {
+    display: block;
+    width: 0;
+    height: 20px;
+    background-color: #555;
+}
+
+/* --> theme: light */
+.theme-light .introLoaderTop,
+.theme-light .introLoaderBottom {
+    background-color: #efefef;
+}
+.theme-light .doubleIntroLoaderProgBar {
+    background-color: #ccc;
+}
+.theme-light .doubleIntroLoaderProgBar span {
+    background-color: #555;
+}
+
+/* --> theme: dark */
+.theme-dark .introLoaderTop,
+.theme-dark .introLoaderBottom {
+    background-color: #333;
+}
+.theme-dark .doubleIntroLoaderProgBar {
+    background-color: #fff;
+}
+.theme-dark .doubleIntroLoaderProgBar span {
+    background-color: #555;
+}
 
+/* --> theme: fluoGreen */
+.theme-fluoGreen .introLoaderTop,
+.theme-fluoGreen .introLoaderBottom {
+    background-color: #67de0f;
+}
+.theme-fluoGreen .doubleIntroLoaderProgBar {
+    background-color: #fff;
+}
+.theme-fluoGreen .doubleIntroLoaderProgBar span {
+    background-color: #dcff1b;
+}
 
+/* --> theme: fluoMagenta */
+.theme-fluoMagenta .introLoaderTop,
+.theme-fluoMagenta .introLoaderBottom {
+    background-color: #ff1bff;
+}
+.theme-fluoMagenta .doubleIntroLoaderProgBar {
+    background-color: #fff;
+}
+.theme-fluoMagenta .doubleIntroLoaderProgBar span {
+    background-color: #ccc;
+}
 
+/* --> theme: fluoYellow */
+.theme-fluoYellow .introLoaderTop,
+.theme-fluoYellow .introLoaderBottom {
+    background-color: #dcff1b;
+}
+.theme-fluoYellow .doubleIntroLoaderProgBar {
+    background-color: #fff;
+}
+.theme-fluoYellow .doubleIntroLoaderProgBar span {
+    background-color: #67de0f;
+}
diff --git a/dist/css/introLoader.min.css b/dist/css/introLoader.min.css
diff --git a/dist/jquery.introLoader.js b/dist/jquery.introLoader.js
@@ -1,5 +1,5 @@
 /*
- *  jQueryIntroLoader - v1.1.2
+ *  jQueryIntroLoader - v1.2.0
  *  "simple intro loader animations"
  *  http://factory.brainleaf.eu/jqueryIntroLoader
  *
@@ -23,14 +23,16 @@
                     effect:'fadeOut',
                     ease: "linear",
                     style: 'light',
-                    delayTime: 500, //delay time in milliseconds
+                    delayTime: 500,
                     animationTime: 300,
+                    progbarAnimationTime: 300,
+                    progbarDelayAfter: 300,
                     fixed: true,
                     stop: true,
                     onAfter: function(){},
                     onBefore: function(){}
                 }
-                    },    
+            },    
 
             spinJs: {}
 
@@ -75,14 +77,19 @@
             var animOpt = plugin.settings.animation.options;
             var spinOpt = plugin.settings.spinJs;
 
-            plugin.spinner = new Spinner(spinOpt).spin();
+
 
             // Choose Animation
             switch(anim) {
                 case "simpleLoader":
+                    plugin.spinner = new Spinner(spinOpt).spin();
                     simpleLoaderAnimation(element,animOpt,spinOpt);
                     break;
+                case "doubleLoader":
+                    doubleLoaderAnimation(element,animOpt);
+                    break;
                 default:
+                    plugin.spinner = new Spinner(spinOpt).spin();
                     simpleLoaderAnimation(element,animOpt,spinOpt);
                     break;
             }
@@ -102,16 +109,22 @@
                 case "simpleLoader":
                     simpleLoaderAnimationExit();
                     break;
+                case "doubleLoader":
+                    doubleLoaderAnimationExit();
+                    break;    
             }
 
         }
+
 
         /*  
             ==================================================
             PRIVATES
             ================================================== 
         */
-        // --> simpleLoaderAnimation
+
+        // ------------------------- simpleLoaderAnimation ----------------------------------
+
         var simpleLoaderAnimation = function(element,animOpt,spinOpt) {
             //console.log('simpleLoaderAnimation --> privateCalled '+plugin.settings.animation.options.effect);
 
@@ -224,7 +237,69 @@
 
         }
 
+        // ----------------------------------------------------------------------------------
+
+
+        // ------------------------- doubleLoaderAnimation ----------------------------------
+
+        var doubleLoaderAnimation = function(element,animOpt) {
+            // onBefore function 
+            animOpt.onBefore(); 
+
+            var styleClass = 'theme-'+ animOpt.style;
+            if (animOpt.fixed === false) {
+                $(element).addClass('absolute');
+                $(element).parent().css({'position':'relative','overflow':'hidden'});
+            }
+            $(element).addClass('introLoader doubleIntroLoader ' + styleClass);
+
+            var markup  = '';
+                markup += '<div class="introLoaderTop"></div>';
+                markup += '<div class="introLoaderBottom"></div>';
+                markup += '<div class="doubleIntroLoaderProgBar"><span></span></div>';
+
+            $(element).html(markup);
+            $(element).show();     
+
+            if (animOpt.stop === true) {
+                $(window).on('load', function() {
+                    doubleLoaderAnimationExit();
+                });       
+            }
+
+        }
 
+        var doubleLoaderAnimationExit = function() {
+
+            var animOpt = plugin.settings.animation.options; 
+
+            setTimeout(function() {
+
+                $(element).find('.doubleIntroLoaderProgBar').find('span').animate(
+                    {'width':'100%'},
+                    animOpt.progbarAnimationTime, 
+                    animOpt.ease,
+                    slidingDoorsVertical()
+                );
+
+            }, animOpt.delayTime ); // end Timeout
+
+            function slidingDoorsVertical() {
+                setTimeout(function() {
+                    $(element).find('.doubleIntroLoaderProgBar').hide();
+                    $(element).find('.introLoaderTop, .introLoaderBottom').animate(
+                        {'height':0},
+                        animOpt.animationTime, 
+                        animOpt.ease,
+                        function() {
+                            $(element).hide();
+                            animOpt.onAfter(); // onAfter function
+                        }
+                    );
+                }, animOpt.progbarAnimationTime + animOpt.progbarDelayAfter ); // end Timeout    
+            } // end slidingDoorsVertical()
+        }
+
         plugin.init();
 
     }