Skip to content
Browse files

Loading animation modified. Issue #3 solved.

  • Loading branch information...
1 parent 06cf5fd commit 64a5224347e08e2e5d2622d4e26acbe3440129f3 @nesk committed Aug 22, 2011
Showing with 25 additions and 37 deletions.
  1. +18 −21 boxifier.css
  2. +7 −16 boxifier.js
View
39 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;
}
View
23 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';
};

0 comments on commit 64a5224

Please sign in to comment.
Something went wrong with that request. Please try again.