Ajax Loader
×

Collective loaders #2

This is collective of loaders #2

HTML 
<div class="loader"></div>
1
<div class="loader"></div>
 
CSS 
.loader {
1
.loader {
2
  margin:10px;
3
  float:left;
4
border-radius:50%;
5
  border-top:50px solid #fff;
6
border-bottom:50px solid #fff;
7
   border-left:50px solid #000;
8
  box-shadow:0 0 0 5px #000;
9
   border-right:50px solid #000;
10
  animation:rotate 1s linear infinite;
11
  -webkit-animation:rotate 1s linear infinite;
12
  -o-animation:rotate 1s linear infinite;
13
  -ms-animation:rotate 1s linear infinite;
14
  
15
}
16
@keyframes rotate{
17
 
18
from {  -webkit-transform: rotate(0deg);
19
  -moz-transform:    rotate(0deg);
20
  -ms-transform:     rotate(0deg);
21
  -o-transform:      rotate(0deg);
22
  transform:         rotate(0deg);
23
   }
24
 
25
to {-webkit-transform: rotate(360deg);
26
  -moz-transform:    rotate(360deg);
27
  -ms-transform:     rotate(360deg);
28
  -o-transform:      rotate(360deg);
29
  transform:         rotate(360deg);}
30
}
31
 
32
@-webkit-keyframes rotate{
33
 
34
from {  -webkit-transform: rotate(0deg);
35
  -moz-transform:    rotate(0deg);
36
  -ms-transform:     rotate(0deg);
37
  -o-transform:      rotate(0deg);
38
  transform:         rotate(0deg);
39
   }
40
 
41
to {-webkit-transform: rotate(360deg);
42
  -moz-transform:    rotate(360deg);
43
  -ms-transform:     rotate(360deg);
44
  -o-transform:      rotate(360deg);
45
  transform:         rotate(360deg);}
46
}
47
 
48
@-o-keyframes rotate{
49
 
50
from {  -webkit-transform: rotate(0deg);
51
  -moz-transform:    rotate(0deg);
52
  -ms-transform:     rotate(0deg);
53
  -o-transform:      rotate(0deg);
54
  transform:         rotate(0deg);
55
   }
56
 
57
to {-webkit-transform: rotate(360deg);
58
  -moz-transform:    rotate(360deg);
59
  -ms-transform:     rotate(360deg);
60
  -o-transform:      rotate(360deg);
61
  transform:         rotate(360deg);}
62
}
63
 
64
@-ms-keyframes rotate{
65
 
66
from {  -webkit-transform: rotate(0deg);
67
  -moz-transform:    rotate(0deg);
68
  -ms-transform:     rotate(0deg);
69
  -o-transform:      rotate(0deg);
70
  transform:         rotate(0deg);
71
   }
72
 
73
to {-webkit-transform: rotate(360deg);
74
  -moz-transform:    rotate(360deg);
75
  -ms-transform:     rotate(360deg);
76
  -o-transform:      rotate(360deg);
77
  transform:         rotate(360deg);}
78
}
79
 
 

Collective loaders #2

CSSDeck G+