Ajax Loader
×
HTML 
<input type="checkbox" id="cb1"/>
1
<input type="checkbox" id="cb1"/>
2
<label id="outer" for="cb1">
3
  <div id="text1" class="rotate">
4
    <span>T<span>r<span>a<span>i<span>n</span></span></span></span></span>
5
  </div>
6
  <div id="text2" class="rotate">
7
    <span>I<span>m<span>p<span>r<span>o<span>v<span>e</span></span></span></span></span></span></span>
8
  </div>
9
  <div id="text3" class="rotate">
10
    <span>G<span>r<span>o<span>w</span></span></span></span>
11
  </div>
12
</label>
 
CSS 
 
1
 
2
3
@keyframes rotate {
4
  from {
5
    transform: rotate(0deg);
6
  }
7
  to {
8
    transform: rotate(360deg);
9
  }
10
}
11
 
12
body { background-image: linear-gradient(#fff, #ccc); }
13
input { display: none; }
14
 
15
#outer {
16
  position: absolute;
17
  margin: -150px;
18
  top:95%;
19
  left: 95%;
20
  width: 300px;
21
  height: 300px;
22
  border-radius: 50%;
23
  background: white;
24
  border: .5em solid #abc;
25
  transform: scale(0.1);
26
  transition: all 1s ease;
27
}
28
#cb1:checked + #outer {
29
  top:50%;
30
  left: 50%;
31
  transform: scale(1);
32
  animation-name: rotate;
33
  animation-duration: 2.5s;
34
  animation-iteration-count: 1;
35
  animation-timing-function: linear;
36
  animation-delay: 1s;
37
}
38
 
39
.rotate {
40
  position: absolute;
41
  left: 50%;
42
  top: 5%;
43
  /*border: 1px solid red;*/
44
}
45
.rotate:before {
46
  content: '';
47
  position: absolute;
48
  border: 0 solid transparent;
49
  border-top: 35px solid #acb;
50
  border-radius: 50%;
51
  width: 140px;
52
  height: 90px;
53
  left: -50px;
54
  transform: rotate(20deg);
55
}
56
.rotate:after {
57
  content: '';
58
  position: absolute;
59
  width: 0;
60
  height: 0;
61
  left: 60px;
62
  top: 40px;
63
  border-top: 40px solid transparent;
64
  border-right: 40px solid #acb;
65
  transform: rotate(20deg);
66
}
67
#text2.rotate:before {
68
  border-top-color: #cba;
69
}
70
#text2.rotate:after{
71
  border-right-color: #cba;
72
}
73
#text3.rotate:before {
74
  border-top-color: #cab;
75
}
76
#text3.rotate:after{
77
  border-right-color: #cab;
78
}
79
.rotate span {
80
  font: 20px Monaco, MonoSpace;
81
  top: 0;
82
  left: 0;
83
  position: absolute;
84
  height: 100px;
85
  width: 20px;
86
  transform-origin: bottom center;
87
  transform: rotate(7deg);
88
  /*border: 1px solid red;*/
89
}
90
#outer > div {
91
  transform-origin: bottom left;
92
  height: 125px;
93
  width: 150px;
94
  position: absolute:
95
  left: 0;
96
  top: 25px;
97
}
98
#text2 {
99
  transform: rotate(120deg);
100
}
101
#text3 {
102
  transform: rotate(240deg);
103
}
104
 
 

Untitled

CSSDeck G+