Ajax Loader
HTML 
<div id="blocks" class="animate">
1
<div id="blocks" class="animate">
2
  <div><div></div></div>
3
  <div><div></div></div>
4
  <div><div></div></div>
5
</div>
 
CSS 
@block-size: 100px;
1
@block-size: 100px;
2
 
3
#blocks {
4
 
5
  //demo
6
  display: table;
7
  margin: .5em auto;
8
  width: @block-size * 3;
9
  //demo
10
 
11
  font-size: @block-size;
12
  font-family: "Gill Sans", "Gill Sans MT", sans-serif;
13
  position: relative;
14
  > div {
15
    .holders();
16
    perspective: 5em;
17
    > div {
18
      .holders();
19
      .transform-style(preserve-3d);
20
      .transform(translateZ(-0.5em) rotateY(-90deg));
21
      &:before {
22
        .base-face();
23
        content: '';
24
        .transform(rotateY(0deg) translateZ(0.5em));
25
      }
26
      &:after {
27
        content:'B';
28
        .base-face();
29
        background-color: #000;
30
        .transform(rotateY(90deg) translateZ(0.5em));
31
      }
32
    }
33
  }
34
  &.animate {
35
    :nth-child(1) > div {
36
      .animation(turn 1s infinite alternate);
37
    }
38
    :nth-child(2) > div {
39
      .animation(turn 1s 250ms infinite alternate);
40
    }
41
    :nth-child(3) > div {
42
      .animation(turn 1s 500ms infinite alternate);
43
    }
44
  }
45
  :nth-child(1) {
46
    left: 0;
47
    z-index: 3;
48
  }
49
  :nth-child(2) {
50
    left: 1.1em;
51
    z-index: 2;
52
  }
53
  :nth-child(3) {
54
    left: 2.2em;
55
    z-index: 1;
56
    div:after {
57
      content:'C'
58
    }
59
  }
60
}
61
 
62
//Mixins
63
 
64
.base-face() {
65
  background-color: #CCCCCC;
66
  position: absolute;
67
  text-align: center;
68
  line-height: 100%;
69
  font-size: 100%;
70
  display: block;
71
  height: 100%;
72
  width: 100%;
73
  color: #FFFFFF;
74
}
75
 
76
.holders() {
77
  width: 1em;
78
  height: 1em;
79
  position: absolute;
80
}
81
 
82
.animation(@value) {
83
  -webkit-animation: @value;
84
  -moz-animation: @value;
85
  -o-animation: @value;
86
  -ms-transition: @value;
87
  animation: @value;
88
}
89
 
90
.opacity(@factor) {
91
  @iefactor: @factor*100;
92
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{iefactor})";
93
  filter: ~"alpha(opacity=(@{iefactor}))";
94
  opacity: @factor;
95
}
96
 
97
.transform(@args) {
98
  -webkit-transform: @args;
99
  -moz-transform: @args;
100
  -ms-transform: @args;
101
  -o-transform: @args;
102
  transform: @args;
103
}
104
 
105
.transform-style(@style) {
106
  -webkit-transform-style: @style;
107
  -moz-transform-style: @style;
108
  -ms-transform-style: @style;
109
  -o-transform-style: @style;
110
  transform-style: @style;
111
}
112
 
113
//Animations
114
@-webkit-keyframes turn {
115
  0% {.opacity(0);.transform(translateZ(-0.5em) rotateY(0deg));}
116
  100% {.opacity(1);.transform(translateZ(-0.5em) rotateY(-90deg));}
117
}
118
@-moz-keyframes turn {
119
  0% {.opacity(0);.transform(translateZ(-0.5em) rotateY(0deg));}
120
  100% {.opacity(1);.transform(translateZ(-0.5em) rotateY(-90deg));}
121
}
122
@-o-keyframes turn {
123
  0% {.opacity(0);.transform(translateZ(-0.5em) rotateY(0deg));}
124
  100% {.opacity(1);.transform(translateZ(-0.5em) rotateY(-90deg));}
125
}
126
@-ms-keyframes turn {
127
  0% {.opacity(0);.transform(translateZ(-0.5em) rotateY(0deg));}
128
  100% {.opacity(1);.transform(translateZ(-0.5em) rotateY(-90deg));}
129
}
130
@keyframes turn {
131
  0% {.opacity(0);.transform(translateZ(-0.5em) rotateY(0deg));}
132
  100% {.opacity(1);.transform(translateZ(-0.5em) rotateY(-90deg));}
133
}
134
 
 

BBC Logo Blocks

CSSDeck G+