Ajax Loader
×
HTML
<h1>Modern UI Loader</h1>
1
<h1>Modern UI Loader</h1>
2
<div id="loader">
3
  <div class="dot"></div>
4
  <div class="dot"></div>
5
  <div class="dot"></div>
6
  <div class="dot"></div>
7
  <div class="dot"></div>
8
</div>
 
CSS
body {
1
body {
2
  background-color: #000;
3
}
4
h1 {
5
  color: #fff;
6
  text-align: center;
7
  font: 80px "Segoe";
8
}
9
 
10
#loader {
11
  width: 100px;
12
  height: 100px;
13
  border-radius: 50%;
14
  position: relative;
15
  left: 50%;
16
  margin-left: -50px;
17
  top: 100px;
18
  transform-origin: 50% 50%;
19
}
20
#loader .dot {
21
  height:50%;
22
  width:10%;
23
  position: absolute;
24
  top: 0;
25
  left: 50%;
26
  transform-origin: 0 100%;
27
}
28
#loader .dot:before {
29
  content: '';
30
  display: block;
31
  width: 100%;
32
  height: 20%;
33
  border-radius: 50%;
34
  background-color: #fff;
35
}
36
#loader .dot:nth-child(1) {animation: loading1 cubic-bezier(0.8,0,0.2,1) 1.7s infinite;}
37
#loader .dot:nth-child(2) {animation: loading2 cubic-bezier(0.8,0,0.2,1) 1.7s infinite;}
38
#loader .dot:nth-child(3) {animation: loading3 cubic-bezier(0.8,0,0.2,1) 1.7s infinite;}
39
#loader .dot:nth-child(4) {animation: loading4 cubic-bezier(0.8,0,0.2,1) 1.7s infinite;}
40
#loader .dot:nth-child(5) {animation: loading5 cubic-bezier(0.8,0,0.2,1) 1.7s infinite;}
41
#loader {animation: loading0 1.7s linear infinite;}
42
@keyframes loading0 {
43
  0% {transform: rotate(0deg);}
44
  100% {transform: rotate(100deg);}
45
}
46
@keyframes loading1 {
47
  0%,40% {transform: rotate(-100deg);}
48
  100% {transform: rotate(160deg);}
49
}
50
@keyframes loading2 {
51
  0%,30% {transform: rotate(-80deg);}
52
  100% {transform: rotate(180deg);}
53
}
54
@keyframes loading3 {
55
  0%,20% {transform: rotate(-60deg);}
56
  100% {transform: rotate(200deg);}
57
}
58
@keyframes loading4 {
59
  0%,10% {transform: rotate(-40deg);}
60
  100% {transform: rotate(220deg);}
61
}
62
@keyframes loading5 {
63
  0% {transform: rotate(-20deg);}
64
  100% {transform: rotate(240deg);}
65
}
 

Modern UI Loader

CSSDeck G+