Ajax Loader
×
HTML 
<div class="foo"></div>
1
<div class="foo"></div>
2
<div class="bar"></div>
 
CSS 
html,body{height: 100%;}
1
html,body{height: 100%;}
2
body{
3
  background-color: black;
4
  background-image: -webkit-radial-gradient(center center, circle cover, rgba(255,255,255, 0.2), transparent 50%)
5
    ,-webkit-radial-gradient(center center, circle cover, rgba(255,255,255, 0.2), transparent 50%);
6
 
7
  background-size: 5px 5px, 100% 100%;
8
}
9
 
10
.foo,
11
.foo:before,
12
.foo:after,
13
.bar,
14
.bar:before,
15
.bar:after{
16
  box-sizing: border-box;
17
  position: absolute;
18
  left: 0;
19
  right: 0;
20
  top: 0;
21
  bottom: 0;
22
  margin: auto;
23
  border: dashed 10px;
24
  border-radius: 50%;
25
-webkit-animation: foo 1.5s ease-in-out alternate infinite;
26
  -webkit-transform: translateZ(0);
27
}
28
.foo{
29
   width: 200px;
30
   height: 200px;
31
  border-color: #004b6a;
32
  -webkit-animation-delay: 1.5s;
33
34
}
35
.bar{
36
  width: 100px;
37
   height: 100px;
38
  border-color: rgba(255,255,255, 0.5);
39
  -webkit-animation-delay: 2.5s;
40
}
41
.foo:before,
42
.foo:after,
43
.bar:before,
44
.bar:after{
45
  content:'';
46
}
47
.foo:before{
48
  border-color: #004b6a;
49
  -webkit-transform: scale(.2);
50
  -webkit-animation-delay: .5s;
51
}
52
.foo:after{
53
  border-color: rgba(255,255,255, 0.5);
54
  -webkit-transform: scale(.4);
55
  -webkit-animation-delay: 1s;
56
}
57
 
58
.bar:before{
59
  border-color: rgba(255,255,255, 0.5);
60
  -webkit-transform: scale(.2);
61
  -webkit-animation-delay: 1.5s;
62
}
63
.bar:after{
64
  border-color: #004b6a;
65
  -webkit-transform: scale(.4);
66
  -webkit-animation-delay: 2s;
67
}
68
 
69
@-webkit-keyframes foo{
70
  to{
71
    -webkit-transform: rotate(1080deg) scale(5);
72
  }
73
74
}
 
JavaScript 
//psychedelic spiral wormhole
1
//psychedelic spiral wormhole
 

Untitled

CSSDeck G+