Ajax Loader
×
HTML 
<div class='pin bounce'></div>
1
<div class='pin bounce'></div>
2
<div class='pulse'></div>
 
CSS 
body {
1
body {
2
  background: #e6e6e6;
3
}
4
 
5
.pin {
6
  width: 30px;
7
  height: 30px;
8
  border-radius: 50% 50% 50% 0;
9
  background: #00cae9;
10
  position: absolute;
11
  transform: rotate(-45deg);
12
  left: 50%;
13
  top: 50%;
14
  margin: -20px 0 0 -20px;
15
}
16
.pin:after {
17
  content: "";
18
  width: 14px;
19
  height: 14px;
20
  margin: 8px 0 0 8px;
21
  background: #e6e6e6;
22
  position: absolute;
23
  border-radius: 50%;
24
}
25
 
26
.bounce {
27
  animation-name: bounce;
28
  animation-fill-mode: both;
29
  animation-duration: 1s;
30
}
31
 
32
.pulse {
33
  background: #d6d4d4;
34
  border-radius: 50%;
35
  height: 14px;
36
  width: 14px;
37
  position: absolute;
38
  left: 50%;
39
  top: 50%;
40
  margin: 11px 0px 0px -12px;
41
  transform: rotateX(55deg);
42
  z-index: -2;
43
}
44
.pulse:after {
45
  content: "";
46
  border-radius: 50%;
47
  height: 40px;
48
  width: 40px;
49
  position: absolute;
50
  margin: -13px 0 0 -13px;
51
  animation: pulsate 1s ease-out;
52
  animation-iteration-count: infinite;
53
  opacity: 0;
54
  box-shadow: 0 0 1px 2px #00cae9;
55
  animation-delay: 1.1s;
56
}
57
 
58
@keyframes pulsate {
59
  0% {
60
    transform: scale(0.1, 0.1);
61
    opacity: 0;
62
  }
63
 
64
  50% {
65
    opacity: 1;
66
  }
67
 
68
  100% {
69
    transform: scale(1.2, 1.2);
70
    opacity: 0;
71
  }
72
}
73
 
74
@keyframes bounce {
75
  0% {
76
    opacity: 0;
77
    transform: translateY(-2000px) rotate(-45deg);
78
  }
79
 
80
  60% {
81
    opacity: 1;
82
    transform: translateY(30px) rotate(-45deg);
83
  }
84
 
85
  80% {
86
    transform: translateY(-10px) rotate(-45deg);
87
  }
88
 
89
  100% {
90
    transform: translateY(0) rotate(-45deg);
91
  }
92
}
93
 
 

Untitled

CSSDeck G+