Ajax Loader
×

Untitled

inspired from http://cssdeck.com/labs/fx4ffaxu

HTML 
<div id="wrapper">
1
<div id="wrapper">
2
<div class="circle one">
3
  <div class="circle">
4
    <div class="circle">
5
      <div class="circle">
6
        <div class="circle">
7
          <div class="circle">
8
            <div class="circle">
9
              <div class="circle">
10
                <div class="circle">
11
                  <div class="circle">
12
13
                  </div>
14
                </div>
15
              </div>
16
            </div>
17
          </div>
18
        </div>
19
      </div>
20
    </div>
21
  </div>
22
</div>
23
<div class="circle two">
24
  <div class="circle">
25
    <div class="circle">
26
      <div class="circle">
27
        <div class="circle">
28
          <div class="circle">
29
            <div class="circle">
30
              <div class="circle">
31
                <div class="circle">
32
                  <div class="circle">
33
34
                  </div>
35
                </div>
36
              </div>
37
            </div>
38
          </div>
39
        </div>
40
      </div>
41
    </div>
42
  </div>
43
</div>
44
  <div class="circle three">
45
  <div class="circle">
46
    <div class="circle">
47
      <div class="circle">
48
        <div class="circle">
49
          <div class="circle">
50
            <div class="circle">
51
              <div class="circle">
52
                <div class="circle">
53
                  <div class="circle">
54
55
                  </div>
56
                </div>
57
              </div>
58
            </div>
59
          </div>
60
        </div>
61
      </div>
62
    </div>
63
  </div>
64
</div>
65
</div>
66
<p>Infinite loader</p>
 
CSS 
body{
1
body{
2
  background:#F9F9F9;
3
}
4
#wrapper{
5
  position:absolute;
6
  left:0;
7
  right:0;
8
  margin:60px auto;
9
  width:320px;
10
}
11
.circle {
12
  padding:8px;
13
  border: 8px solid rgba(0,0,0,0.0);
14
    border-radius:400px;
15
16
  animation: left 2s linear infinite ,roll 3s linear infinite;
17
}
18
.two , .two .circle{
19
    animation: lefttwo 2s linear infinite ,roll 3s linear infinite;
20
 
21
}
22
  .three , .three .circle{
23
    border-radius:90px;
24
    animation: lefttwo 3s ease infinite reverse,roll 3s linear infinite;
25
 
26
}
27
.one {
28
    width:288px;
29
      height:288px;
30
  }
31
 
32
@-webkit-keyframes roll{
33
  0% { transform:rotate(0deg)}
34
  100% {transform:rotate(360deg)}
35
}
36
@-webkit-keyframes left{
37
  0% { border-: 8px solid rgba(0,0,0,0.0);}
38
  50% {border-left: 8px solid #00b7f2;}
39
  100% { border-: 8px solid rgba(0,0,0,0.0);}
40
 
41
}
42
@-webkit-keyframes lefttwo{
43
  0% { border-: 8px solid rgba(0,0,0,0.0);}
44
  50% {border-left: 8px solid #000;}
45
  100% { border-: 8px solid rgba(0,0,0,0.0);}
46
 
47
}
48
p{
49
  text-align:center;
50
  color:#999;
51
}
52
 
 

Untitled

CSSDeck G+