Loading animation modified. Issue #3 solved.

nesk · Aug 22, 2011 · 64a5224 · 64a5224
1 parent 06cf5fd
commit 64a5224
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 37 deletions.
diff --git a/boxifier.css b/boxifier.css
@@ -114,33 +114,30 @@
 
 .box_load {
   display: none;
-
   position: absolute;
   top: 50%; left: 50%;
-  margin: -12px 0 0 -12px;
+  margin: -3px 0 0 -25px;
+  width: 50px; height: 6px;
+  font-size: 0;
+}
 
-  width: 20px; height: 20px;
-  border: 5px solid rgba(204,204,204,0.2);
+.box_load div {
+  display: inline-block;
+  margin: 0 3px 0 0;
+  width: 6px; height: 6px;
 
-  border-top-color: rgba(204,204,204,0.6);
-  border-right-color: rgba(204,204,204,0.6);
-  border-bottom-color: rgba(204,204,204,0.6);
+  background-color: rgba(204,204,204,0.3);
 
-  -webkit-border-radius: 99px;
-  -moz-border-radius: 99px;
-  border-radius: 99px;
-}
+  -webkit-border-radius: 9px;
+  -moz-border-radius: 9px;
+  border-radius: 9px;
 
-.box_rotate {
-  -moz-transform: rotate(90deg);
-  -o-transform: rotate(90deg);
-  -webkit-transform: rotate(90deg);
-  transform: rotate(90deg);
+  -moz-transition: all 0.25s linear;
+  -o-transition: all 0.25s linear;
+  -webkit-transition: all 0.25s linear;
+  transition: all 0.25s linear;
 }
 
-.box_anim {
-  -moz-transition: -moz-transform 0.27s linear;
-  -o-transition: transform 0.27s linear;
-  -webkit-transition: transform 0.27s linear;
-  transition: transform 0.27s linear;
+.highlight {
+  background-color: rgba(204,204,204,0.8) !important;
 }
diff --git a/boxifier.js b/boxifier.js
@@ -536,29 +536,20 @@
 
       var el = document.createElement('div');
       el.className = 'box_load';
+      el.innerHTML = '<div></div><div></div><div></div><div></div><div></div>';
       parent.appendChild(el);
 
       setInterval((function() {
 
-        var state = 3,
-            states = [
-              [1, 'Left', 'Top'],
-              [2, 'Top', 'Right'],
-              [3, 'Right', 'Bottom'],
-              [0, 'Bottom', 'Left']
-            ];
+        var state = 4;
 
         return function() {
 
-          el.className = 'box_load';
-
-          state = states[state][0];
-          el.style['border'+ states[state][1] +'Color'] = 'rgba(204,204,204,0.2)';
-          el.style['border'+ states[state][2] +'Color'] = 'rgba(204,204,204,0.6)';
-
-          setTimeout(function() {
-            el.className = 'box_load box_anim box_rotate';
-          }, 20);
+          var previousState = state;
+          state = state >= 4 ? 0 : state+1;
+
+          el.childNodes[previousState].className = '';
+          el.childNodes[state].className = 'highlight';
 
         };