add loader animation

naeioi · Apr 14, 2016 · 3beab8f · 3beab8f
1 parent 4662305
commit 3beab8f
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 2 deletions.
diff --git a/css/other.css b/css/other.css
@@ -0,0 +1,56 @@
+.spinner {
+	position: absolute;
+    top: 8px;
+	left: 40px;
+    height: 40px;
+    text-align: center;
+    font-size: 10px;
+    color: white;
+    z-index: 20000;
+	visibility: hidden;
+}
+
+.spinner > div {
+  background-color: #fff;
+  height: 100%;
+  width: 6px;
+  display: inline-block;
+
+  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+  animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
+  20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+  0%, 40%, 100% { 
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% { 
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
+}
diff --git a/index.html b/index.html
@@ -14,7 +14,6 @@
     <title>海报大师</title>
 </head>
 <body style="background-color: #121212">
-
 <nav class="navbar navbar-fixed-top navbar-inverse navbar-default" style="background-color: rgba(0,0,0,0.6)">
     <div class="navbar-header">
         <a class="navbar-brand" href="main.4.0.html">Design</a>

diff --git a/js/Template.js b/js/Template.js
@@ -13,10 +13,16 @@ define(["createjs"], function(createjs){
     var p = createjs.extend(Template, createjs.DisplayObject);
 
     function getImage(src) {
+
+		document.getElementsByClassName('spinner')[0].visibility = 'visible';
+		document.getElementsByClassName('navbar-brand')[0].visibility = 'hidden';
+
         var def = $.Deferred();
         var img = document.createElement('img');
         img.src = src;
-        img.onload = function(){
+        img.onload = function(){				
+			document.getElementsByClassName('spinner')[0].visibility = 'hidden';
+			document.getElementsByClassName('navbar-brand')[0].visibility = 'visible';
             def.resolve(img);
         };
         return def.promise();

diff --git a/main.4.1.html b/main.4.1.html
@@ -9,6 +9,7 @@
     <link href="css/jquery-ui.css" rel="stylesheet">
     <link href="css/flat-ui.min.css" rel="stylesheet">
     <link href="css/colorset.css" rel="stylesheet">
+	<link href='css/other.css' rel='stylesheet' media='screen'>
     <script src="lib/jquery-2.1.3.min.js"></script>
     <script src="lib/bootstrap.min.js"></script>
     <script src="lib/jquery-ui.js"></script>
@@ -41,6 +42,13 @@
             <span class="sr-only">Toggle navigation</span>
         </button>
         <a class="navbar-brand" href="#">Design</a>
+		<div class="spinner">
+		  <div class="rect1"></div>
+		  <div class="rect2"></div>
+		  <div class="rect3"></div>
+		  <div class="rect4"></div>
+		  <div class="rect5"></div>
+		</div>
         <div class="nav navbar">
             <div class="container">
                 <div class="row">